Skip to main content


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

Configuring list views

Updated on January 14, 2022
Applicable to Cosmos React applications

Help users access and compare data with lists. Use tables, timelines, 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.
Note: Data objects and case objects do not use list views, but can produce tables through field configuration. For more information on configuring data and case objects as tables, see Configuring fields associated with case and data objects.

You can find list views in the views pane on the User Interface tab of a case. Data objects do not use list views.

List views on the User Interface tab
List views are the third category in the views pane.

Before you begin: Prepare the configurable components:

Configuring tables

Present large amounts of information in a clear and consistent way by using tables. Tables are flexible and familiar user interface components, and provide a reliable basis for users to view or compare information.

  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.
    Note: The Case history view, which is listed under Forms, is fully configured out-of-the-box to display the log of all user actions that are related to the case. You can edit presentation options, such as sorting and grouping, but changing data page and parameter settings might cause the view to display errors.
  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.
  5. In the Template field, select Table.
  6. 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.
    Note: The type of fields that you can add as columns vary depending on the data page configuration. For more information, see Available columns.
  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. Define how the application sorts data in the table:
    1. 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.
    2. 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. In the Max height (rows) list, select the maximum height of the list view.
  12. Optional: To enable bulk processing of list items, select the Allow bulk actions checkbox.
    Tip: Bulk processing is available for tables on case pages and landing pages. The actions in the bulk action menu are case-wide actions. For more information, see Adding optional actions to cases and Troubleshooting errors in bulk processing.
  13. Optional: To define additional table behavior, select any of the checkboxes in the Editing and User Personalization section.
    For example: Select the Allow adding new records checkbox, and then in the Action label field, enter the label for the action, such as New mortgage case.

    You can populate the new row with default values by setting up a pre-processing data transform. For more information, see Adding data transform to a process.

  14. 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 5to 13
  15. 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.

Configuring galleries

Automate the display of repetitive data records with a tiled gallery. For example, you can use a gallery template to arrange data about pending mortgages into a series of standardized cards that display the name, mortgage amount, and an case ID of each application.

  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.
  5. In the Template field, select Gallery.
  6. In the Card header list, select the field that you want to use as the header for your tile.
  7. In the Secondary text field, select the field that you want to use as the source of additional text on your tile.
  8. 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.
    Note: The type of fields that you can add as columns vary depending on the data page configuration. For more information, see Available columns.
  9. In the Column to take up remaining width, define which column stretches to fill free space in your table.
  10. 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.
  11. Define how the application sorts data:
    1. 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.
    2. In the list that appears next to the property field, select the order in which you want to sort the table.
  12. In the Max height (rows) list, select the maximum height of the list view.
  13. Optional: To define additional gallery behavior, select any of the checkboxes in the User Personalization section.
  14. 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 12.
  15. Click Save.
For example:

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.

Configuring a timeline

Applicable to Cosmos React applications

Provide users with insight into your business process by displaying data in chronological order. A timeline view presents a progression of events that is sourced from a data page that includes information about the time and the nature of the event.

For example, in a loan application, you can use a timeline view to present the employment history of the applicant, arranged in reverse chronological order, with the current employer displayed first.
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, in the List section, click the view that you want to edit.
  3. In the Data page list, select the data page from which you want to source the list contents.
  4. In the Display name list, enter a name for the view.
  5. In the Template list, select Timeline.
  6. In the Date list, select the Date Time field that holds the information about the time of the event.
  7. In the Title list, select the field that holds the description of the event and appears as the heading for the timeline entry.
  8. Optional: To define additional timeline settings, perform the following actions:
    1. To add an icon to each timeline entry, in the Icon list, select the property that holds the icon reference.
      Note: The icon reference must be a string that contains the name of the icon in the Cosmos design library, for example 'car-solid'.
    2. To add a status indicator, in the Status list, select the property that holds the status reference.
    3. To add fields to a collapsible section inside each event, in the Additional fields section, click Add, and then select the target fields.
  9. In the Date grouping list, define the time period by which you want to sort the entries.
  10. In the Filter by list, define whether you want to filter the entries.
    For more information, see Using conditional logic in Cosmos React.
  11. In the Sort by list, define the order in which the timeline displays the entries.
    Note: The settings in the User personalization sections and the Max height (Rows) setting do not apply to the timeline view. The timeline also does not support grouping or search.
  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 5 to 11.
  13. Click Save.
For example: In this scenario, the timeline view displays the employment history of the applicant:
A sample timeline view at run time
The timeline displays employment history by date. Additional fields in an expandable section present employment details.

Reordering records on lists

Help users edit records in a data object by making table rows draggable. For example, in a customer service application, you can use this feature to provide users with convenient tools to reshuffle the priority of outstanding work.

Pega Platform comes with an out-of-the-box pyMoveRecords data transform in which you can define the logic that you want the application to apply when the user drags a table row. In the case of the customer service application, you can set up a logic that increases the priority of work items when they move up in the list.

Before you begin: Create and configure a view that uses the table template.

    Enabling moving records in App Studio

  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, in the Lists section, select the list that you want to edit.
  3. In the Editing section, select the Allow moving records checkbox.

    4. Adding the pyMoveRecords data transform to the data list class in Dev Studio

  4. In Dev Studio, search for and open the pyMoveRecords data transform.
  5. On the pyMoveRecords tab, click Save as.
  6. On the New tab, in the Apply to field, enter the class of the data list that you use to provide records to your table.
  7. Click Create and open.

    8. Editing the data transform

  8. In the class-specific pyMoveRecords rule that you created, on the Definition tab, define what the application does when the user changes the order of table rows.
    For more information on composing data transforms, see Data transforms.
  9. In the rule form, click Save.

Available columns

When you configure tables, the configuration of the data page from which you source the table content determines the list of fields that you can include in the table as columns.. By understanding the characteristics and limitations of each data page configuration, you can build better table views.

Data page with a report definition

If the data page that you use to source table content uses a report definition, you can add the following fields to your table:

  • Basic fields that you add as columns on the backing report if the fields are optimized for reporting and marked as relevant records for the current class.
  • Embedded properties from pages (single page properties) that you add as columns to the backing report if the properties are optimized for reporting and marked as relevant records for the current class.
  • Properties from associations rules that you add as columns to the backing report if the association rule is a simple association and the properties are optimized for reporting and marked as relevant records for the current class. The complex version of the association rule form is not supported.
For example:

Simple rule form for association rules
Simple rule form for a Create operator rule that contains four simple settings.

The data page with a report definition cannot support the addition of the following types of fields to tables:

  • Fields that are specified in the backing report that require complex associations or joins that are specified in the report definition.
  • Embedded properties from page lists.
  • Embedded properties from page groups.

Data page without a report definition

If you source table content from a data page without a report definition, you can dd only basic fields to your table.

The data page without a report definition cannot support the addition of the following types of fields to tables:

  • Embedded properties from pages.
  • Embedded properties from page lists.
  • Embedded properties from page groups.
  • Properties from association rules.

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

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

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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