Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Configuring lists

Updated on October 17, 2022
Applicable to Cosmos React applications

Help users access and compare data with lists. Use tables and tile galleries in your applications as a flexible basis for users to process large amounts of information. For example, tables in a price comparison application can help users efficiently identify the best offer.

You can also configure views to support editing, sorting, and custom presentation options.
Before you begin: Prepare the configurable components:
  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.
  2. On the User interface tab, click the list that you want to edit.
  3. In the Data page field, select the data page from which you want to source the list contents.
  4. In the Display name field, enter the name for the view, and then define how you want to present the data to the user:
    ChoicesActions
    TableIn the Template list, select Table.
    Tile-based gallery
    1. In the Template list, select Gallery.
    2. In the Card header list, select the field that you want to use as the header for your tile.
    3. In the Secondary text field, select the field that you want to use as the source of additional text on your tile.
  5. In the Columns section, add the columns that you want to include in the view by clicking Add, and then select the field that you want to associate with the column.
  6. In the Column to take up remaining width, define which column stretches to fill free space in your table.
  7. Optional: To define what data is displayed in the table, set one or more filters:
    1. In the Filter by list, select Custom, and then click the Properties icon.
    2. In the Condition Builder window, define the expression that you want to use to filter the table contents.
      For more information, see Using conditional logic in Cosmos React.
  8. In the Sort by list, add the property by which you want sort the list by clicking Add, and then select the field that you want to use as a filter.
  9. In the list that appears next to the property field, select the order in which you want to sort the table.
  10. Optional: To group the table contents by a property, in the Group by list, add the property by which you want group the table by clicking Add, and then selecting the target field.
  11. Optional: To define additional table behavior, in the User Personalization section, select the check boxes for the features that you want to use.
    For example: To give users the tools to hide table columns, select Allow user edit column visibility.
  12. Optional: To add a new view to the list, under the data source list, next to the Default view tab, click Add, and then repeat steps 4 to 11.
  13. Click Save.
For example: If you configure several views for your list, at run time, the table includes a view picker similar to the one that is presented in the following figure:

View picker
A list that enables the user to display home mortgage data as a tiled gallery or a simple table.

If you configure your view as a gallery, the UI displays list entries as tiles. The following image represents a sample gallery tile:

Sample tile of a gallery-based list
Mortgage data for a sample customer.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us