Configuring Pages and Including Widgets

Building and configuring your customer web portal requires the configuration of pages and widgets. Pages act as the containers where widgets are made available to customers, and the widgets provide the features and data analysis.

The pages of the web portal are delivered with a default set of widgets and configurations. This default configuration provides a fully functioning web portal. You can update the initial configuration to add, hide, or remove widgets from the pages.

Warning: Be aware that if you deploy Digital Self Service - Transactions as embedded widgets rather than the Digital Self Service - Transactions standalone portal, page configuration is not required. All configuration for embedded deployments is handled through Configuring Widgets and Defining Global Styling and Configurations.

Including Widgets in Pages

Widgets provide the main content on pages. By default, each page comes with a set of widgets that match the tasks and themes of the page. For example, the Energy Use Overview page includes widgets that provide customers with various insights and ways to view their energy use, along with widgets that are used to make required customer account selections.

You can add widgets to pages or remove existing widgets. Use the steps below to modify the widgets on a page.

To add a widget to a page

The steps provided below can be repeated to add all applicable widgets to a page.

  1. From the Pages area, select an existing page. The widgets for the page are displayed.
  2. Click the Add Widget button. The Add Widget dialog box appears.
  3. Determine the default configurations for the widget:
    • To add a widget that inherits defaults from the main widget library, click Select a widget from the Core library and click Next. The Choose Widget page is displayed.
    • To add a widget that inherits configurations from your own library, click Copy a widget from My Library and click Next. The Choose Widget page is displayed.
  4. Select the desired widget, and click Next. The Define ID page is displayed
  5. Specify a unique Widget ID and click Done. Widget IDs can only contain certain characters and cannot include spaces. This ID determines how widget configurations are shared across the web portal, and is required when embedding and linking widgets.

    If a widget is intended to share the same configuration across multiple pages of the web portal, ensure that you use the same widget ID that is used on other pages. All configuration updates for the widget with this widget ID remain in sync. If a widget is intended to have a page specific definition, use a widget ID that is unique to the page.
  6. Within the page where the widget has been added, select Page Configurations. The page configurations are displayed.
  7. From the Widgets area, select Add New. A new row is added to the Widgets area.
  8. Select the new row that was added, and define the following:
    • Name: Enter the widget ID specified when adding a widget to the page.
    • Enabled: Select Yes to include the widget in the page.
    • Segments: Enter any customer segments that are required to control access to the widget. If all customers are allowed to view the widget, leave this field blank. If segmentation is defined for a widget, the same segmentation must be defined for any applicable menu and portal routing elements. Every widget has an applicable portal routing element, but not every widget has an applicable menu element as many menu elements link to pages that contain multiple widgets. For more information on segmentation, see Portal Segmentation.
  9. Select Save Changes to save your page configurations and fully add the widget to the page.

To disable a widget from a page

Widgets that are included as part of the default configuration of a page cannot be fully removed from a page. You can remove the widget from the view of the page that customers see by disabling the widget on the page.

  1. From the Pages area, select an applicable page and then click Page Configuration to display the configurations for the page. The method of disabling a widget depends on how the widget is included in the Page Configuration:
    • If the widget is included in the Widgets area, select the row for the widget and set the Enabled option to No.
    • If the widget supports account selector or notifications functionality, use the following options:
      • Enable Account Selector: Select No to disable the Digital Self Service - Transactions account selector.
      • Enable Wem Account Selector: Select No to disable the account selector available for Digital Self Service - Energy Management widgets.
      • Enable Toast: Select No to disable the notification bar on the page.
  2. Select Save Changes to save your page configurations and disable the widgets from the page.

To remove a widget from a page

The steps provided below can be repeated to remove widgets from a page.

Note: The steps below fully remove a widget from a page. To temporarily hide a widget that will be shown on the page at a later time, the widget should be temporarily disabled. For more information, see To disable a widget from a page.

  1. From the Pages area, select an existing page. The widgets for the page are displayed.
  2. Locate the widget to remove, and from the Actions drop-down list for the widget, select Delete. A confirmation dialog box is displayed.
  3. Click Continue to confirm the removal. A confirmation message is displayed.
  4. Within the page where the widget has been removed, click Page Configurations. The page configurations are displayed.
  5. From the Widgets area, select the delete option for the widget. A confirmation dialog box is displayed.
  6. Select Yes to confirm the deletion.
  7. Select Save Changes to save your page configurations and fully remove the widget from the page.

Back to Top

Configuring a Page

Each page includes a set of configurations that defines the content available on the page.

To configure a page:

  1. From the Pages area, select an existing page.
  2. Locate the page to configure and select Page Configurations. The page configurations are displayed.
  3. Complete any required configurations, including:
    • Name: The programmatic name that is used to link to and access the page. Ensure that this name uses supported characters and does not include spaces. This name is also used in routing configuration, as described in Portal Routing.
    • Enabled: Determines if the page is enabled for display to customers. To hide a page from your Digital Self Service - Transactions web portal, select No.
    • Widgets: Defines the widgets included on the page. A widget in the list can be selected to enable or disable it from view, as well as apply segmentation on the widget to show the widget only for certain segments of customers.
    • Layout: Defines the general structure and layout of the page, which includes the following options:
      • Blank: Widgets on the page are positioned vertically, each with a maximum width of 1200 pixels.
      • Hero Content: Widgets on the page are positioned vertically, and do not use a width restriction, and applies a background to the page. To define hero background configuration, configure the hero configuration options that are part of Portal.
      • Wide: Widgets on the page are positioned vertically and do not use a width restriction.
    • Enable Account Selector: Determines whether to show or hide the Digital Self Service - Transactions account selector.
    • Enable Wem Account Selector: Determines whether to show or hide the account selector available for Digital Self Service - Energy Management widgets.
    • Enable Toast: Determines whether to show or hide the notification bar on the page.

Back to Top