The Scrollable Area Pattern is a simple scrollable block with a placeholder for content. You can use this pattern to display multiple elements in a single, scrollable row or column.
How to use the Separator UI Pattern
In Service Studio, in the Toolbox, search for
The Scrollable Area is displayed.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
From the Toolbox, drag the Scrollable Area widget into the Main Content area of your application's screen,
By default, the Scrollable Area widget contains a Content placeholder.
Add the relevant content to the Content placeholder.
In this example, we add some images by dragging the Image widget into the Content placeholder, and on the Properties tab, from the Image dropdown, select the relevant images.
On the Properties tab, you can customize the Scrollable Area's look and feel by setting any of the optional properties, for example, the height and width of the scrollable area.
After following these steps and publishing the module, you can test the pattern in your app.
|Orientation (Orientation Identifier): Optional||Set the orientation to either horizontal or vertical. Note that, when the Orientation is set to vertical, a fixed height value must be added.|
|Height (Text): Optional||Define the height of the scrollable area. If not defined, the height of the of the parent wrapper is used (100%).|
|Width (Text): Optional||Define the width of the scrollable area. If not defined, the width of the parent wrapper is used (100%).|
|ScrollbarType (ScrollbarType Identifier): Optional||Choose between different scrollbar types - Compact, Default, and None. If None is selected, the scrollbar is invisible, but you can still scroll. Horizontal scroll is not enabled with the mouse wheel but can be done with mousepad gestures.|
|ExtendedClass (Text): Optional||Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.