Configuring Widgets

Widgets modularize functionality and content to provide a responsive layout and configuration capabilities for your web portal. Widget configuration is composed of two areas:

  • Configuring Widget Behavior: Widget behavior includes various concepts that impact the user experience for a widget. This can include simple behavior such as showing or hiding certain parts of a widget to more complex behavior such as whether customers have the option to select the bill considered for their bill comparison.
  • Configuring Widget Messages: Widget messages are the text elements that appear in a widget. This includes the headings, labels, insight message, long form text, and all other text elements displayed to customers that are interacting with a widget.

Note: For best practices on using Opower Configuration Tool to complete your product configuration, see Best Practices and Configuration Considerations.

Using Shared or Page Specific Widgets

A widget can be used in multiple locations of your web portal. When including a widget in multiple locations, consider whether the widget should share its configuration definition, or have a page specific definition.

A widget that is shared in multiple pages means that all configuration changes to the widget are reflected on all pages it is included on. Shared widgets reduce the number of changes that are required, as configurations are automatically applied to all applicable uses of the widget. The widget ID determines if a widget is shared or page-specific. Widget definitions with the same ID are shared, and widgets with a unique ID are page specific. For more information on defining the widget ID when adding widgets to a page, see Configuring Pages and Including Widgets.

A widget that is specific to a page means that configuration changes to the widget are only reflected on that page. Page-specific widgets allow for unique configuration of a widget to meet a page's requirements. A technique to reduce the maintenance burden of a page-specific widget is to perform as much shared configuration on the widget as is possible, and this widget can be included on the page. Then, the widget ID can be modified to define the widget as page-specific, and then the page specific configurations can be completed.

To Modify the Widget ID

  1. From the Pages area, select an existing page. The widgets included on the page are displayed.
  2. For the applicable widget, from the Actions drop-down list, select Edit Widget ID. The Change Widget ID page is displayed.
  3. Within the Widget ID field, modify the ID as required. Validation is performed when defining widget IDs to ensure the widget IDs only contain supported characters and do not include spaces in the ID. 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.
  4. Click Confirm to save your changes. If you modified a widget to use a unique widget ID, you can now modify the widget functionality and messages as required for the page.

Back to Top

Example Widget Configuration

The following steps provide a direct example of performing widget configuration tasks, along with using the preview to review the configuration changes.

  1. From the Opower Configuration Tool, click Widgets, and then click Bill Summary. The configuration options for the Bill Summary widget are displayed, along with the initial preview which is shown below.
    Initial configuration of the Bill Summary widget which displays summary information of a customers current bill
  2. From the Text (en-US) options, within the Messages tab, update the Bill Details Section Title to say Your Bill Details, and then click Save Changes. The widget preview is updated as shown below with the Your Bill Details title.
    Updated configuration of the Bill Summary widget which includes a new Your Bill Details title
  3. From the Functionality options, within the Preferences tab, modify Currency Decimals Places as 1, and then select Save Changes. The the widget preview is updated with the new currency formatting as shown below.

    Updated configuration of the Bill Summary widget which includes modified currency formatting to show a single decimal place

Back to Top