Skip to main content


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

Configuring column views

Updated on October 17, 2022
Applicable to Cosmos React applications

Build a reusable user interface module by defining the form and content of a view. Views are clusters of UI components that you can modify according to your business needs by adding fields, applying templates, or embedding other views.

For example, in a loan application you can create a view with fields for collecting data about a secondary applicant, and then use that view in different contexts throughout the application.
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 column-based view that you want to edit:
    ChoicesActions
    Forms
    1. On the Workflow tab, in the Case life cycle section, click an assignment or an approval step.
    2. In the Step properties pane, click Configure view.
    Case views and previously-configured formsOn the User interface tab, click the view that you want to edit.
    Note: The list includes only the views for new steps that you initially configured in the Workflow tab.
  3. In the Edit view section, make the updates that you need:
    • To change the name of the view, in the View name field, enter a new view name.
    • To change the view template, click Edit, and then click the template that you want to apply to 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.
  4. 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.
  5. Click Save.
For example:

In this scenario, the view uses a two-column template.

A sample two-column view at run time
The view contains fields for user data, a boolean that informs the app about a second applicant, and attachment fields.

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