Skip to main content


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

Creating a custom widget

Updated on December 13, 2022

Help your users to quickly access additional information by defining a custom widget. Widgets work best in situations where the data they present needs to be accessed at all stages of the case, but does not require complex analysis.

For more information about out-of-the-box widgets, see Widgets in the utilities pane.

  1. Create a new section:
    1. In the header of Dev Studio, click CreateUser InterfaceSection.
    2. On the Create Section tab, specify the label, context, class, and ruleset for the design template, and then click Create and open.
      A new section opens in templated mode.
  2. Convert the templated section into a widget:
    1. In the section editor header, click Convert to full section editor, and then confirm the conversion.
    2. On the Settings tab, convert your section to a widget by clicking Workarea widget.
  3. On the Design tab, define the structure and content of your widget:
    • To add a layout, from the Structural list, drag layouts into your widget.
    • To add a control, expand the list that represents the type of control that you want to add, and then drag the control to the work area.
    For more information on configuring controls, see UI components in a view.
  4. Select the dynamic layout that hosts your widget, and then click the View properties icon.
  5. In the Dynamic layout properties dialog box, on the General tab, define the appearance of your widget:
    1. In the Container format list, select Other.
    2. In the list that appears to the right of the Container format field, select Utility.
    3. Select the Display header and title checkbox.
    4. In the Container settings section, select the Include icon or value checkbox.
    5. In the Icon or value type list, select Standard icon.
    6. In the Icon field, enter the location of the icon.
  6. On the Presentation tab, define additional CSS for your widget:
    1. Select the Display advanced presentation options checkbox.
    2. In the Header CSS class field, enter flex-header utility.
  7. Click Submit.
  8. Optional: To add a badge that displays the number of assets in the widget when the widget is collapsed, perform the following actions:
    1. From the Data display list, drag a Text control to your widget.
    2. Select the newly added Text control, and then click the View properties icon.
    3. On the Presentation tab, in the Advanced presentation options section, in the Cell read-write classes field, enter utils-badge.
    4. In the Cell read-only classes field, enter utils-badge.
    5. Click Submit.
  9. In the section definition, click Save.
What to do next: Add the widget to the utilities pane. The widget is a standard section, and you can add it to the utilities pane the same way you add any other section. For more information, see Adding UI components to a view.

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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