Gallery
You can use the Gallery UI Pattern to display groups of content. This UI pattern allows users to sequentially browse images, with the notion of a beginning and an end.
How to use the Gallery UI Pattern
The Gallery UI Pattern usually displays dynamic information. In most cases, prior to using this pattern, you will need to retrieve or update the Data that contains the information you want to display on screen. You do this by using an Action. In this use case, we use local resources.
-
In Service Studio, in the Toolbox, search for
Gallery.The Gallery widget 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 Gallery widget into the Main Content area of your application's screen.
-
Add the required content to the Gallery widget.
By default, the Gallery widget expects a list.
To use the Gallery UI Pattern with items from a database, drag a List Record into the Gallery widget and create your custom content.
In this example, we delete the list and add images by dragging the Image widget into the Gallery widget and selecting an image from the OutSystems UI images. You can add as many as required.
-
On the Properties tab, you can set the number of items to display on each row for different device types (see below for examples).
After following these steps and publishing the module, you can test the pattern in your app.
The following are examples of how the items are display depending on how many you specify for each row.
4 items per row
3 items per row
2 items per row
1 item per row
Properties
| Property | Description |
|---|---|
| ItemsDesktop (Integer): Optional | Number of Items displayed per line on a desktop. |
| ItemsTablet (Integer): Optional | Number of Items displayed per line on a tablet. |
| ItemsPhone (Integer): Optional | Number of Items displayed per line on a phone. |
| ExtendedClass (Text): Optional | Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS. Examples
|
Additional notes
Line Separator for ListRecords should be None.
