Overview
In the App Designer editor, the Small card control allows you to represent information contained in the forms of a collection by means of a list of cards, arranging the information in an organized and appealing way. It also includes an option to execute user-specified actions.
Adding a Small card control to your page
To add a Small Card control to your app page, open the Controls menu (located at the top left corner of the screen). Then, locate the Collections control and click the arrow icon to display the available options. Scroll down until you find the Small card control and drag it to the page you are editing.
Managing the control content
With the control already added to your app page, you can manage the content that will be displayed. To do this, hover over 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, select the Fixed tab in the Manage Content window.
Each Small card item includes editable fields related to the content displayed on each card:
•Image: Allows you to upload an image from your computer. To do this, click the Choose a file... button, select the desired image, and upload it.
•Title: Corresponds to the title of the card item. The title is always displayed on the first line of the card.
•Description: Allows you to provide a brief explanation of the image or title. This text appears on the second line of the card.
•Caption: Acts as a subtitle for the card and is useful when additional context is needed. This text appears on the third line of the card.
•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.
Once you finish configuring the fields, click Apply and Close to save the changes.
|
When adding static content, all available options for Collection controls are also available for the Small card 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, click the three-dot menu in a collection item. This opens a drop-down menu displaying all available events. Select the event you want to execute.
Activities as Actions
Users can view and execute pending activities of a process from the three-dot menu in a collection item or from a Detail page. This feature allows users to complete activities quickly and without additional configuration.
After publishing your app, there are two ways to view pending activities:
1.In the App Designer editor go to a page where a collection has been configured.
a.Select an item and click the action menu. A list of pending activities is displayed.
b.Select one to execute it and generate a case.
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 Small card control includes a New Record button. Click the 
button to open a form and add a new record.
Defining the control appearance
You can change the control's appearance by adjusting its design and layout.
Adjusting the control design
To adjust the design, hover over the control and select the Settings option.
You can modify the following design settings:
1.Style
•Align: Aligns the text to the left, center, or right side of the control.
•Image size: Defines whether the image is displayed in its Original size or Scaled to fill the container.
•Image container: Defines the shape of the image (square or round).
•Control width: Defines the width of the control relative to the container.
In the following tables, you can see how images will appear based on the image container and the image size:
2.Fonts
•Font family: Defines the font used in the control (default is Poppins Regular).
•Font size: Defines the size of the text.
|
Fonts settings apply to the Title, Description, and Caption 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 card items displayed (same as in Style settings).
•Content Flow: Defines how cards are displayed within the control. You can choose between:
oList: Displays cards in a vertical list.
oGrid: Displays cards 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 card.
•Item spacing: This option defines the spacing between card:
oNo space: Displays cards without any visible gaps, placing them edge to edge and creating a dense layout.
oCompact: Applies minimal spacing between cards while maintaining visual separation.
oNormal: Uses a balanced amount of spacing to improve readability.
oWide: Increases spacing to emphasize separation between cards.
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: Defines how the width of each card behaves:
oAdjust to screen: The card width automatically adapts to the available space, allowing the layout to dynamically adjust the number of columns.
oSet width: The card width is defined manually between 200 px and 520 px, ensuring consistent sizing across all cards.
•Number of columns: Defines how many columns are displayed in the grid layout.
•Alignment and distribution: Controls how cards are positioned within the container:
oLeft: Aligns cards to the left side.
oRight: Aligns cards to the right side.
oCenter: Centers cards within the container.
oUniform: Distributes cards evenly across the available space so that they fill the container uniformly.
oEven Space: Applies equal spacing between cards while maintaining their size.
These settings help you organize cards efficiently, maintain consistent layouts, and optimize space usage across different screen sizes.
Last Updated 7/14/2026 4:20:59 PM