This content has been archived.

Table of Contents

Quick start: Creating a dashboard template

A dashboard is a part of the user interface that contains one or more widgets grouped into slots arranged within a template. A template is an arrangement of slots. Each slot can have multiple (or no) widgets assigned to it. Widgets contain controls that the user can configure.

Use this tutorial to create a personalized dashboard template in Designer Studio for displaying case data in an application. An example configuration is also included.

This walkthrough takes approximately 15 minutes to complete.

Requirements

Before getting started, you must enable dashboard personalization for your portal. The Customize dashboard icon is displayed at the top of the screen for users who have the privilege for pxDashboard. You should also add the section pxUserDashboard if the Customize dashboard icon is not displayed.

Choosing a default template

The Pega 7 Platform includes several default templates that require no setup.

To select an existing template at run time:

  1. Click the Customize dashboard icon to display the Edit dashboard panel.
  2. Click Switch template.
  3. Select the template that you want to use.
    Default templates

    Default templates available in the Pega 7 Platform

Creating a customized template

To create your own dashboard template, complete the following steps:

  1. Create a section
  2. Add dynamic layouts
  3. Set section type

Create a section

  1. Create a section for your template by clicking +Create > User Interface > Section.
  2. In the Apply to field, reference the class that you want in your application.
Ensure that your section is in the same class as the harness being used for your dashboard, or in one of its parent classes.
  1. Click Create and open.

Add dynamic layouts

In this set of instructions, you want each dynamic layout that you add to represent a slot for assigning widgets.

  1. Add dynamic layouts to the section to match the layout that you want.
  2. Drag the section pxUserDashboardSlot into each dynamic layout (slot) so that you can place widgets.
Do not use a repeating layout when placing the pxUserDashboardSlot section.
  1. Change Page context to Use clipboard page.
  2. Use .pxUserDashboard.pySlots(x) for the Clipboard page, where x represents the slot number.

Section include form

Use the most important or main content in the first slot .pxUserDashboard.pySlots(1) as a best practice.
  1. Add the name of your section.
  2. Optional: You can customize the direction of your widgets by including a section parameter, or you can leave this field blank to stack your slots by default.

Slot orientation options are case-sensitive and include:

  • stacked (default)
  • inline
  • Inline-grid-double
  • inline-grid-triple
  1. Click OK, and then save your changes.

Set the section type

Identify the type of section that you are creating and configure its settings.

  1. From the Settings tab, select Dashboard template.
  2. Enter a title and, optionally, an icon for your template.
  3. Click Save.
You must save your progress, check in your rules, log out, and then log in again after creating a template in order for the template and widget pickers to display correctly at run time.

You have successfully created a dashboard template. From the Case Manager portal, select the Settings icon to view your new template at run time.

For a guided walkthrough of adding widgets to your template, see Quick start: Creating a dashboard widget.

Next steps

Now that you know the basics of setting up a template, get the most out of your customized dashboards by viewing Section form - Completing the Settings tab. From here, you can obtain additional information about:


100% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.