Skip to main content

Table of Contents

Configuring lists

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.
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:

    Choices Actions
    Table In 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.

    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.

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.

Did you find this content helpful?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us