Skip to main content


Configuring tabs

Suggest edit Updated on July 20, 2021
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.

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.
  3. In the Tabs section, click Add.
  4. In the New tab dialog box, enter the name for your tab, and then click Submit.
  5. In the Tabs section, next to the newly added tab, click the Drill in icon.
  6. 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 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.
  7. At the top of the Edit tab pane, click Back to return to the main view.
  8. Optional: To create additional tabs, repeat steps 3 through 7.
For example: In this scenario, the Pulse and History views are sharing a tabbed template.
Sample tabbed view at run time
The view has two tabs: Pulse and History.
Did you find this content helpful? YesNo

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. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us