Skip to main content


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

Configuring case and object views

Updated on June 1, 2022

Cluster UI components into a convenient module that you can reuse in different contexts throughout your application by using case and object views. You can use case views for case types and object views for data objects in read-only scenarios, for example, as tabs on the full view page.

Case and object views include custom views that you create during application development and default views that the application creates automatically, namely, the Details, Preview, and Summary views. When enabled, the Confirmation view also appears in the case views list.

By default, the system sets Details and Summary views as tabs on the full view page.

You can case and object views in the views pane on the User Interface tab of a case or a data object.

Case views on the User Interface tab
Case views are the second category in the views pane.

Configuring the preview

Applicable to Cosmos React applications

Help your users get the main facts about a case or a data object without opening a new browser tab. By configuring a preview, you can decide which fields the preview panel displays on the right side of the application when the user clicks the preview option.

  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.
  2. Open the preview that you want to configure:
    ChoicesActions
    Case viewOn the User interface tab, in the Views pane on the left side of the window, click Preview.
    Data view
    1. On the Data model tab, in the Options column, click the data object for which you want to create a view.
    2. On the User interface tab of the data object, in the Views pane on the left side of the screen, click Preview.
  3. Adjust the appearance of the preview pane by doing any of the following actions:
    • To remove the case life cycle chevron from the preview, clear the Show case life cycle checkbox.
    • To hide related assignments, clear the Show assignments checkbox.
For example: In this scenario, the preview presents the details of a loan attestation case.
Sample preview configuration for a case
A preview pane in the right quarter of the screen lists summary information about a loan application case, including case details.

Configuring the summary data view

Applicable to Cosmos React applications

Give your users a convenient way to check important case or data object information by configuring the summary data view. The summary data view appears on the left side of the case page and lists data, such as case priority, status, or history.

  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.
  2. Open the summary view that you want to configure:
    ChoicesActions
    Case summaryOn the User interface tab, in the Views pane on the left side of the window, click Summary data.
    Data summary
    1. On the Data model tab, in the Options column, click the data object for which you want to create a view.
    2. On the User interface tab of the data object, in the Views pane on the left side of the screen, click Summary data.
  3. In the Highlighted fields section, click Add, and then select which fields and widgets you want to display at the top of the case summary pane.
    For example: To add a widget that displays links to related work items, click AddWidgetsRelated cases.
  4. In the Fields section, click Add, and then select which fields and widgets you want to display below the primary fields on the case summary pane.
    For example: Click AddFieldsCase ID.
For example: In this scenario, the summary data view displays Priority and Borrower primary fields, as well as several case-related secondary fields, including Purchase Price and Mortgage amount.
Sample summary data view configuration for a case
Summary view that shows the Priority and Borrower fields and a column of several secondary fields.

The fields that you map into the Highlighted fields region render inline from left to right, and their values render with a pronounced visual treatment. The fields that you map into the Fields section stack vertically along the summary panel with the field label on the left and the value on the right.

Configuring details views

Applicable to Cosmos React applications

Build case-wide UI modules by defining the form and content of a details view. Details views are clusters of UI components, such as fields, that you reuse in different contexts across your application in read-only mode.

For example, in a loan application, you can create a view with account details of the loan applicant.

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. Open the view that you want to configure:
    ChoicesActions
    Case viewOn the User interface tab, in the Views pane on the left side of the window, click Details.
    Data view
    1. On the Data model tab, in the Options column, click the data object for which you want to create a view.
    2. On the User interface tab of the data object, in the Views pane on the left side of the screen, click Details.
  3. In the Edit view section, define the layout and header for the view:
    • To change the view template, click Edit, and then click the template that you want to apply to the view.
    • To change the name under which the view appears on the view list, in the View name field, enter a new view name.
    • To change the text of the label that appears at the top of the view at run time, in the View label field, enter a new label text.
    • To display the view without a label at the top, clear the Show label checkbox.
  4. Optional: To display selected fields in a prominent position on the top of the view, perform the following actions:
    1. Select the Enable highlighted fields checkbox.
    2. In the Highlighted fields section, click Add, and then select the field that you want to highlight.
  5. In the Region section, define the content of the view:
    • To add a field, view, data relationship, or UI component to the view, click Add, and then select the item that you want to include.
    • To change the position of a field or view on the page, drag the component into place.
    • To remove a field or view from the page, click the Remove icon.
  6. In the row with the new item, click the Configure icon, and then define additional settings, such as labels and visibility.
    For more information, see Configuring fields.
  7. Click Save.
For example:

In this scenario, the details view displays fields that contain information about the loan originator.

A sample details view for a case
Details view in the context of a case, located in the lower half of the screen.

Configuring tabs

Applicable to Cosmos React applications

Group fields together in your application by category with a tabbed view template. By using tabs, you can create an intuitive UI that saves screen space and helps users find the information they need with less effort.

Depending on your business needs, you can also nest tabs views inside other tab views.

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 tabbed view that you want to edit.
    Data objects do not support simple tabs.
  3. In the Edit view section, define the header for the view:
    • To change the text of the label that appears at the top of the view at run time, in the Header field, enter a new label text.
    • To display the view without a label at the top, clear the Display header checkbox.
  4. In the Tabs section, click Add.
  5. In the New tab dialog box, enter the name for your tab, and then click Submit.
  6. In the Tabs section, next to the newly added tab, click the Drill in icon.
  7. In the Edit tab pane, configure the tab by doing any of the following actions:
    • To change the tab template, click Edit, and then click the template that you want to apply to the tab.
    • To change the tab label, in the Tab name field, enter the new label text.
    • To add a widget, view, field, or an insight to the page, click Add, and then select the UI component that you want to add.
    • To change the position of a UI component on the page, drag it into place.
    • To remove a component from the page, click the Remove icon.
    • To define when the tab appears in the view, in the Visibility list, define the visibility condition.
    For more information, see Using conditional logic in Cosmos React.
  8. At the top of the Edit tab pane, click Back to return to the main view.
  9. Optional: To create additional tabs, repeat steps 4 through 8.
For example: In this scenario, the Pulse and History views are sharing a tabbed template.
Sample tabbed view configuration for a case
Tabbed view with two tabs (Pulse and History) in the context of a case.

Configuring dynamic tabs

Applicable to Cosmos React applications

Source your UI from data objects to keep your UI up to date with minimum effort. By linking a dynamic tab in your application to a data object, you can ensure that the system automatically updates the UI to match any changes to the data.

For example, you can use dynamic tabs to display information about your customer's subscriptions. You create a Subscriptions data object that holds the list of services that the customer uses, and then use that object as a data source for dynamic tabs, with separate tabs for each service. If the user adds a new subscription service to the list, the system automatically adds a new tab for that service, with no additional configuration required.

Before you begin: Prepare the tab components:
  • Create a data object.
  • In the case type, create a view that uses the dynamic tabs template.
  • In the data object, create a view that you want to use for the tab.

For more information, see Adding data objects to organize data and Creating views in Cosmos React.

  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.
  2. Open the view that you want to configure:
    ChoicesActions
    CaseOn the User interface tab, in the Views pane on the left side of the window, click the dynamic tabbed view that you want to edit.
    Data object
    1. On the Data model tab, in the Options column, click the data object for which you want to create a view.
    2. On the User interface tab of the data object, in the Views pane on the left side of the screen, click the dynamic tabbed view that you want to edit.
  3. In the Edit view section, define the header for the view:
    • To change the name under which the view appears in the view list, in the View name field, enter a new view name.
    • To change the text of the label that appears at the top of the view at run time, in the Header field, enter the new label text.
    • To display the view without a label at the top, clear the Display header checkbox.
  4. In the Data page field, select the list for the data object from which you want to source the tab information.
    For example: Select List subscriptions, which is the auto-generated list for the Subscriptions data object.
  5. In the Tab label field, select the data object property that determines how the system divides content into tabs.
    For example: Select Subscription name.

    In the Subscriptions data object, the Subscriptions name field has three records: TV, Internet, and Mobile. Consequently, the system sources three tabs, TV, Internet, and Mobile, each representing a single record.

  6. In the Tab content field, select the data object view that you want to display on the tab.
    For example: Select Details.
For example: In this scenario, the tabs represent records in the Subscriptions data object.
Sample dynamic tabs at run time
The view has three tabs: Internet, TV, and Mobile.

Configuring a confirmation view

Applicable to Cosmos React applications

Help your users better understand the next steps in their work by configuring an out-of-the-box confirmation view. A confirmation view appears when the user completes all of their assignments, and you can configure it to display custom instructions or a list of open tasks that might interest the user later in the process.

For example, you can use your application to register customer complaints. When the case worker completes processing a complaint and has no more work assigned, the confirmation view displays guidance on what to communicate to the user who logged the complaint.

    Enabling the confirmation view

  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.
  2. In the case type, click the Settings tab.
  3. In the menu on the left side of the case type, click General.
  4. In the Assignment processing section, select the Display custom view when no more assignments are available to the user checkbox.
  5. Click Save, and then, click ActionsRefresh.

    6. Configuring the view

  6. On the User interface tab, in the Case views section, click Confirmation.
  7. In the Edit view section, define the header for the view:
    • To change the text of the label that appears at the top of the view at run time, in the View label field, enter the new label text.
    • To display the view without a label at the top, clear the Show label checkbox.
  8. In the Region A section, define the content of the view:
    • To add a field, view, data relationship, or a UI component to the view, click Add, and then select the item that you want to add.
    • To change the position of a field or a view on the page, drag the component into place.
    • To remove a field or a view from the page, click Remove this field.
  9. In the row with the newly added item, click the Configure icon, and then define additional settings, such as labels and visibility.
    For more information, see Configuring fields.
  10. Optional: To hide open assignments from the view, clear the Show tasks checkbox.
    Tip: You can edit the What's next message by editing the contents of the pyWhatsNext property. For more information, see Configuring page, page group, and page list properties.
For example: In this scenario, the view uses a two-column template.
A sample confirmation form at run time
The confirmation form displays fields related to the closed complaint and a link to the next open task.

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