Overview
In the App Designer editor, the List collection control allows you to represent information contained in collections in the form of a list, arranging it in an organized and visually appealing way. It also includes the option to execute user-specified actions.
Adding a List collection control to your page
To add the List Collection control to your app page, open the Controls menu (located at the top left corner of the screen). Then, look for the Collections control and click the arrow icon to display the available options. Scroll down until you find the List Collection control, and drag it to your page.
Managing the control content
With the control already added, you can manage the content displayed in it. To do so, click the control to display the configuration options, and then select the Manage Content option.
There are two types of content when adding data to a collections control:
•Static content: Fixed content that does not change over time.
•Dynamic content: Content retrieved from the Persona's Views, My Stuff, or Cases.
Static content
When adding static content (by selecting the Fixed tab), the List Collection item includes the following editable fields:
•Title: Corresponds to the title of the list item. The title is always displayed on the left side of the item.
•Text: Provides a brief description of the title. This text is displayed next to the title.
•Link: Allows you to define navigation, either to an internal page within the app or to an external URL. You can also enable the option to open the link in a new tab.
|
When adding static content, keep in mind that all available options for Collection controls also apply to the List Collection control. For more information, refer to Static content. |
Dynamic content
You can add content from the Persona's Views, My Stuff, or Cases using the Connection Wizard (see Dynamic content).
Once the data is configured, the control displays labels indicating the data mapping and the data source at the bottom right corner.
The control also allows you to execute:
•Events as Actions
•Activities as Actions
Events as Actions
Events as Actions allows you to access events related to an entity once your app is published from a Collection with dynamic data, in the same way actions are accessed from a view wit dynamic data.
To access events from collections, click the three-dot menu in the collection item. This displays a drop-down menu with all the events related to the entity. Click the option corresponding to the event you want to execute.
Activities as Actions
Users can visualize and execute pending activities of a process from the three-dot menu in a collection item or from a Detail page. This allows users to execute them more easily and quickly without any additional configuration.
After publishing your app, there are two ways to visualize pending activities:
1.In the App Designer editor go to a page where a collection has been configured.
a.Select an item from the collection and click the action menu. A list of pending activities will be displayed.
b.To execute one, simply select it, and a case will be generated.
2.In the App Designer editor go to a previously created Detail page.
a.Access the Detail page from a collection (e.g., from a Small Card collection).
b.The page displays buttons associated with pending activities. Select one to execute it and generate a case.
New Record configuration
The List Collection control includes a New Record button. Click the 
button to open a form and add a new record.
Defining the control appearance
You can modify the control's appearance by adjusting its settings and layout.
Adjusting the control settings
To adjust the settings, hover over the control and select the Settings option.
You can configure the following settings:
1.Style
•Align: Aligns the text to the left, center, or right side of the control.
•Displayed items: Defines the number of list items displayed.
•Control width: Defines the width of the control as a percentage of the container.
2.Fonts
•Font family: Defines the font used for the text (default is Poppins Regular).
•Font size: Defines the size of the text.
|
Font settings apply to both the Title and Text fields. |
3.Colors
You can configure the following:
•Font color: Defines the color of the text.
•Background color: Defines the background color of the control.
•Border color: Defines the color of the border between list items.
•Icon color: Defines the color of icons, if present.
When grouping content using the Group by option or configuring actions, you can also define:
•Active group tab color: Background color of the active group. The active group is the value of the category currently used to filter the dynamic content.
•Action button color: Background color of buttons that execute Events or Activities configured as Actions in the control.
|
•Click the Reset button to restore default settings. •Properties with inherited values display a blue dot. Hover over it to see the source. When modified, a Reset option appears for that specific property. |
Visibility options
In this section of the menu, you can define the control's visibility from the VISIBILITY tab.
This option contains two sections:
•In the Personas section, you can select the entities or Personas that are allowed to view the control.
•In the Devices section, you can configure the control's visibility by device (Desktop, Tablet or Mobile). For further information, refer to Control visibility by device.
Adjusting the control layout
To adjust the layout, hover over the control and select the Layout option.
You can configure the following options:
•Displayed items: Defines the number of list items displayed (same as in Style settings).
•Content Flow: Defines how items are displayed within the control. You can choose between:
oList: Displays items in a vertical list.
oGrid: Displays items in a grid layout.
•Item Layout: Defines whether the text is positioned to the left (Basic left) or to the right (Basic right) within each list item.
•Item spacing: This option defines the spacing between items:
oNo space: Displays items without any visible gaps, placing them edge to edge and creating a dense layout.
oCompact: Applies minimal spacing between items while maintaining visual separation.
oNormal: Uses a balanced amount of spacing to improve readability.
oWide: Increases spacing to emphasize separation between items.
oCustom: Allows you to define a specific spacing value between 0 px and 80 px.
Custom Grid configuration
When Content Flow is set to Grid, additional layout configuration options are available:
•Card width mode: This option defines how the width of each item behaves:
oAdjust to screen: The item width automatically adapts to the available space, allowing the layout to dynamically adjust the number of columns.
oSet width: The item width is defined manually between 200 px and 520 px, ensuring consistent sizing across all items.
•Number of columns: Defines how many columns are displayed in the grid layout.
•Alignment and distribution: This option controls how items are positioned within the container:
oLeft: Aligns items to the left side.
oRight: Aligns items to the right side.
oCenter: Centers items within the container.
oUniform: Distributes items evenly across the available space so that they fill the container uniformly.
oEven Space: Applies equal spacing between items while maintaining their size.
These settings help you organize list items efficiently, maintain consistent layouts, and optimize space usage across different screen sizes.
Last Updated 7/14/2026 5:32:52 PM