A dashboard is a part of the user interface that contains one or more widgets grouped into slots that are arranged in a template. Dashboard widgets contain configured controls of any class that can be configured by an end user.

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

Prerequisites

• You must have Pega 7 Platform application credentials to create this widget.
• You must have already created a dashboard template. See Quick start: Creating a dashboard template.
• Enable dashboard personalization for your portal. The Personalize dashboard icon is displayed at the top of the screen for users who have the ​pxDashboard privilege.

Configuring a widget

You need to set a few options on the section that identifies it as a widget, as well as items such as thumbnail image, category, and the widget configuration section.

Dashboard widget settings

1. To configure a widget, click the Settings tab from any section.
2. From the Section type menu, click Dashboard widget.
3. Complete the required fields:
   • Widget title – Title of the widget that is displayed in the widget picker.
   • Widget description – Description of the widget that is displayed in the widget picker.
   • Category – A category that is associated with a widget. Add a new category name that applies to this widget or use autocomplete to view existing categories.
   • Widget icon – Click the Gear icon to select an icon from the Image Catalog. The recommended size is 50 x 50 pixels.
   • Flow action class – Leave this field blank for now. Widget options are configured in the next example. (Determines class value of flow action for widget options.)
   • Flow action name ​– Leave this field blank for now. Widget options are configured in the next example. (Determines the name of the flow action for widget options.)
4. Click Save.

Widget picker at run time

You have successfully created a dashboard widget. For additional configuration details, try the following ​Widget configuration options example.

Widget configuration options

You can also set up configuration options for your new widget. This example shows how you can enable users to change the title of a widget and to toggle case status by referencing the properties that you have configured.

Creating an options section

1. Create a section for your widget options by clicking +Create > User Interface > Section.
   • In the Apply to field, reference the class that you want in your application, and then click Create and open.
   • Select the Text Input control (tied to .pyLabel) and drop it in the section.
   • Click Save.
2. Create a flow action for your widget options by clicking +Create > Process > Flow Action.
   • In the Apply to field, reference the class that you want in your application, and then click Create and open.
   • In the Section field, reference the section that you created in the previous step.
   • Click Save.

Configuring the options section

1. Open the widget options section that you created previously.
2. From the Settings tab, select Dashboard widget.
3. Enter a Widget title and Category.
4. Set the Flow action class, and then select the Flow action name that you created in the previous steps for Creating an options section.
5. From the Pages & Classes tab:
   • Add Page name – .pxUserDashboardWidgetOptions
   • Add Class –flow action class that you indicated in the previous steps for Creating an options section.
6. From the Design tab of your widget, add a Formatted Text control tied to the .pxUserDashboardWidgetOptions.pyLabel property.
7. Check out, save, and then check in the section.

That's it! You can now add the configurable widget to your portal.

Test your example at run time

1. Open the Case Manager portal and click the Gear icon to open edit mode.
2. Click Add widget(s).
3. Select the widget that you created and click Add selected.
4. Click your widget from the Edit dashboard panel to display the edit widget options.
5. Change the text box value.
6. Click Save.

The widget now displays the updated label.

See Available widgets for a list of all system widgets and to find out which ones have additional configuration options.

Next steps

Now you know the basics of setting up dashboard widgets for personalization in Case Manager. For more ideas about getting the most out of your reports, see these PDN articles:

Fine-tuning reports in Pega 7

Editing user access to case types, flows, flow actions, and assignments