Use a widget to display interactive self contained information.

Widget components improve usability through built-in logic and functionality. They are typically a collection of multiple out-of-the-box Constellation UI components combined in a unique way.

FileInput is an example of a Widget component. The FileInput component lets a user upload files or attachments using drag-and-drop or by opening the user’s file explorer when clicked.

Constellation provides a wide range of widgets that you can add to your application to improve usability by gathering helpful functions in one place. Widgets are supported by Portal landing pages and full object Views. In the full view scenario, widgets populate the expandable Utilities panel. Some widgets are customizable and require additional configuration to fully work, while others are ready to use by default. For example, you can help users maintain clarity in attachments by defining custom categories for the attachments that they upload to cases.

You can use the DX Component Builder to create three types of widgets:
  • PAGE (Portal widgets) - This widget can be used only in landing pages.
  • CASE (Utilities pane widgets) - This widget can be used only in case views.
  • PAGE & CASE (Both) - This widget can be used in portal landing pages, and the Utilities pane for both case and data views.

PAGE widgets

Page widgets can be added to Portal landing pages and can be used for any purpose. They should operate in the Portal context, where they should be operating on cases and data in bulk as opposed to at the instance level.

Examples of out-of-the-box page widgets include the ToDo list and App Announcements.

The following video shows an example of a page widget being added to a landing page in the Portal View. In this video, the Edit landing page window of a page template is opened. Within the Region A section, + Add is clicked and under Widgets, the Quick create checkbox is selected and Add is clicked. The Quick create widget is displayed in the Region A section and the preview refreshes to display the widget.

CASE widgets

Case widgets are added to the Utilities pane in App Studio. Case widgets interact with a case instance, where they provide data in the instance context related to a specific case.

Examples of out-of-the-box Utilities pane widgets include the Stakeholders widget, the Followers widget, and the Related cases widget.

Use the example widget provided in DX Component Builder as the starting point for your own widget. DX component builder examples are relatively basic for this type of widget and do not provide starting points for common Utilities widgets. The Widget challenge in this mission provides a comprehensive example of how to build everything mentioned above.

The following video shows an example of a case widget being added to a case. In this video, the UX tab of a case type is opened. In the Full Page View tab, + Add is clicked within the Utilities section. From the list of available widgets, the Stakeholders widget is selected and Add is clicked. The Preview now refreshes and displays the Stakeholders widget added to the Utilities section.

PAGE & CASE widgets

Page & Case widgets can be used in the Case, Data, and Portal contexts. The only out-of-the-box example of Page & Case widgets is the Pulse (Feed) widget.

Use the example widget provided in DX Component Builder as the starting point for your own widget.

The following video shows an example of a page and case widget being added to a data object. In this video, the UX tab of a case type is opened. In the Full Page View tab, + Add is clicked within the Utilities section. The Pulse widget is selected and Add is clicked. The Pulse widget is displayed in the Utilities section.

The following video shows an example of a page and case widget being added to a landing page. In this video, the Edit landing page window of a page template is opened. Within the Region A section, + Add is clicked and under Widgets, the Pulse checkbox is selected and Add is clicked. The Pulse widget is displayed in the Region A section and the preview refreshes to display the Pulse widget.

The following video shows an example of a page and case widget being added to a case. In this video, the UX tab of a case type is opened. In the Full Page View tab, + Add is clicked within the Utilities section. From the list of available widgets, the Pulse widget is selected and Add is clicked. The Pulse widget is displayed in the Utilities section.

To provide a similar user experience to the Pega provided widgets, all Utilities pane widgets in the case and data contexts must adhere to the following design system guidelines:
  • Use the SummaryList design system component for displaying lists of data with an item count.
    • Use the View all functionality for lists that contain more than three items.
    • Use the Actions functionality for actions to be performed at the instance level as well as for creating new items.
  • Provide the Icon design system component in the upper-left corner of the widget. For more information on the Icon design system component, see Icon.
  • Use Popovers or Modal dialogs to add, edit, or delete entries invoked by actions performed at the instance level. For more information, see Popover and Modal dialog.
  • The following guidelines are implemented in most out-of-the-box Utilities pane widgets:
    • If the Utilities pane is in collapsed mode, provide a widget icon and current item count.
      NOTE: To display the widget icon when the Utilities pane is in collapsed mode, you must add the iconName property to your config.json file, and then import and register the icon. For more information, see Import and register Pega icons.
    • If the item count must reflect the current number of items in the SummaryList for the current browser session, use the ConstellationJS publish/subscribe (PubSub) methods.
    • If the item count must reflect the current number of items in the SummaryList for all browser sessions across all users viewing this case or data instance, use the ConstellationJS notifications manager (Websockets API).