Organize case data by categories with a tab-based landing page template. By using tabs, you can create a familiar and intuitive UI that saves screen space and helps users find the information they need with less effort.

Before you begin: Prepare the configurable components:

• Create a landing page that uses the tab template. For more information, see Creating a landing page for an application.
• Create the views and insights that you want to add to the landing page. For more information, see Creating views in Cosmos React, Creating views for case types and Creating insights.

1. Open the 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. 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, or an insight to the page, click Add, and then select the UI component that you want to add.Note: The view menu contains list views that you defined in the application. In hybrid applications, the widget menu contains only Cosmos React widgets.
   • To change the position of a widget or a view on the page, drag the component into place.
   • To remove a widget or a view from the page, click Remove.
   • 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.
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.