Skip to main content


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

Configuring a list-based landing page

Updated on October 17, 2022
Applicable to Cosmos React and Theme Cosmos applications

Help users quickly process large amounts of information by setting up list views. Pega Platform applications display lists as tables or tiles, which you can configure to support filtering, sorting, and custom presentation options.

For example, a portal for loan officers can include a table that lists mortgage applications. Each manager can then gain quick insight into upcoming work and the status of ongoing cases. You can also set up multiple views to help users filter the data according to their needs.
Before you begin: Prepare the configurable components:
  1. Open the list page that you want to edit:
    1. In the navigation pane of App Studio, click Channels.
    2. In the Current channel interfaces section, click the icon that represents the portal with the page that you want to edit.
    3. On the portal page, on the Content tab, click the Landing pages category.
    4. In the Landing pages pane on the left side of the screen, click the page that you want to edit.
  2. Change the icon of the page by clicking Choose icon, and then select an image that you want to use.
    Pega Platform includes a set of default icons.
  3. From the options under the List page title field, select Custom list page.
    Tip: If you have a configured list that you want to include in the landing page, you can select Use existing lists and skip the configuration.
  4. In the Data page field, select the data page from which you want to source the table contents.
  5. 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.
  6. In the Columns section, add the columns that you want to include in the view by clicking Add, and then selecting the field that you want to associate with the column.
  7. In the Column to take up remaining width, define which column stretches to fill free space in your table.
  8. 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.
  9. In the Sort by list, add the property by which you want sort the list by clicking Add, and then selecting the field that you want to use as a filter.
  10. In the list that appears next to the property field, select the order in which you want to sort the table.
  11. 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.
  12. Optional: To define additional table behavior, select any of the check boxes in the User Personalization section.
    For example: To give users the tools to hide table columns, select Allow user edit column visibility.
  13. Optional: To add a new view to the list, under the data source list, next to the Default view tab, click +Add.
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