IBM Support

JazzSM Dashboard Widgets Interaction - Eventing Demystified

Technical Blog Post


Abstract

JazzSM Dashboard Widgets Interaction - Eventing Demystified

Body

The DASH (Dashboard Application Services Hub) component in the UI Services of IBM JazzSM product supports custom dashboarding via drag and drop. This enables customers and business partners to easily create tailored dashboards at their end easily, without any programming and minimal technical knowledge. But many times you may want the widgets to interact each other too, either to other widgets in same page or even another page. In this blog we will see how to do that and a quick peek into how it works.

 

DASH supports many events for interaction between widgets. You can see the events supported by a widget by going to the 'Events' settings of the widget.

image

image

 

In the above example, the List widget titled "Computer Systems" publishes "NodeClickedOn" event and subscribes to "dataRefresh" event, as shown above in the second image.

 

 

Following table gives a quick summary of some of the events in DASH

Event NameDescriptionPublished BySubscribed By
NodeClickedOnUsed for sending context between widgets on the same pageMany widgets, eg: List, Table, Gauges etcAlmost all widgets, eg: List, Table, Gauges, Charts etc
LaunchPage

User for sending context to another page in DASH

NOTE: this can't be configured in the Events settings

Widgets that support this provide an optional setting in the Quick Edit (Visualization Settings) called "Page to Launch"Almost all widgets, eg: List, Table, Gauges etc
dataRefreshUsed for listening to refresh events sent by the Refresh Timer widgetRefresh TimerAlmost all widgets, eg: List, Table, Gauges etc

TimeSet

NOTE: Coming Soon

Used for listening to time range events sent by the Time Selector widgetTime SelectorAlmost all widgets, eg: List, Table, Gauges, Charts etc
DisplayURLUsed to tell the Web Widget what URL to display. Great to display non-DASH URL in a dashboardNone, could be used via a transformWeb Widget

 

NOTE: The sender won't receive the event it sends.

 

 

So let us take an example and see how the eventing works. Following is the initial state of the dashboard when opened. Each widget is configured to different datasets (but related data) and most of the widgets usually show data in the order it is retrieved. Eg: Multi-row or collection widgets like Table or List shows first few rows vs single row widgets like Gauges or Smart Text shows the first row.

 

Initial State of the Dashboard:

image

 

You can see the gauges showing first row returned from respective dataset.

 

 

Dashboard with context set

A row in the List was selected (akita.raleigh.ibm.com) and the other 3 widgets updated to show more information about the selected row (also called context).

image

 

Event Flow

 

This explains on a very high level what happens in the background:

image

 

In above example, EventLink, Description and Status are column IDs of dataset 'Computer Systems" which the list widget is configured to.

 

 

If you are troubleshooting, you can see the above behavior if you look at the new items request for any of the receiving widgets:image

 

More detailed information on troubleshooting can be found in this Guide: Troubleshooting Problems with Dashboard Widgets

 

 

Couple of things to note:

  • Ensure the events are properly configured in both source and target widgets. Eg: Source should publish NodeClickedOn and targets should subscribe to the same.
  • Both widget as well as the configured dataset should support Eventing for the desired behavior. If your dataset doesn't recognize or not process the incoming parameters from the event, widget would just reload and show old or incorrect data
  • On a very high level, the gluing magic is that the target dataset has a matching parameter for the incoming event context. IBM products like TBSM, ITM etc use standard parameters like MSSName, SourceToken, ProviderType etc for inter-product communication. If you are creating custom datasets via TDI or Impact, make sure you have a matching parameter in the target which matches to at least one of the source column IDs.

 

Here is a demo video of how to do this via

 

Now go and make some amazing and powerful dashboards that are interactive and can even drill thru with context to show more detailed information. Good luck!

 

TIPS:

1) You can do page launch or external launches even if a widget doesn't support it directly. Here are some hints:

2) You can find more info on transforming events here: Transforming the event in DASH & Wires

 

[{"Business Unit":{"code":"BU053","label":"Cloud & Data Platform"},"Product":{"code":"","label":""},"Component":"","Platform":[{"code":"","label":""}],"Version":"","Edition":"","Line of Business":{"code":"","label":""}}]

UID

ibm11080177