Inter Widget Communication via the PubSub Model

The Dashboard Portal allows inter-widget communication via the publisher/subscriber model. In any publisher/subscriber approach the publisher (i.e., sender) sends messages without specifically targeting a subscriber (i.e., receiver). The receiver indicates that it needs to receive one or more messages published by a particular publisher or a set of publishers.

Inter-widget communication in the Dashboard Portal is based on the same model where the dashboard itself keeps track of its publishers, subscribers, and their subscriptions. When a particular publisher publishes a message, the dashboard routes the message to its subscribers based on the store-and-forward mechanism.

Implementing a publisher/subscriber widgets

Before you begin:

You need to create a widget that can be deployed on the Dashboard Portal. For detailed instructions, see Generating Widgets.

For the subscriber widget, enter information for dynamic query generation to fetch information from the publisher. For more information, see Generating Widgets - Dynamic Query Generation Configuration.
For the publisher widget, enter a data publishing configuration to specify how it should publish information. For more information, see Generating Widgets - Data Publishing Configuration.

To implement publisher/subscriber widgets follow the steps below.

Step 1: Create a publisher widget

Ensure that your widget is extended from the based widget provided by the dashboard portal. If not, follow the instructions in Creating Custom Widgets - Extending from base widget component.
To specify the widget as a publisher widget, add the following configuration to the widgetConf.json file of the widget that can be found in the <SP_HOME>/wso2/dashboard/deployment/web-ui-apps/portal/extensions/widgets/<WIDGET_NAME> directory.
configs: { ... pubsub: { types: ['publisher'] }, ... }
To publish a message call the following function. The message can be of any type.
super.publish('message');

To demonstrate how publisher widgets are created and used, a sample widget named Publisher is shipped with WSO2 Stream Processor. To view the source code of this widget, click here.

Step 2: Create a subscriber widget

Ensure that your widget is extended from the based widget provided by the dashboard portal. If not, follow the instructions in Creating Custom Widgets - Extending from base widget component.
To specify the widget as a subscriber widget, add the following configuration to the widgetConf.json file of the widget that can be found in the <SP_HOME>/wso2/dashboard/deployment/web-ui-apps/portal/extensions/widgets/<WIDGET_NAME> directory.
configs: { ... pubsub: { types: ['subscriber'] }, ... }
To subscribe to publishers call the following function.
super.subscribe((message) => { // Handle the message here. });

To demonstrate how subscriber widgets are created and used, a sample widget named Subscriber is shipped with WSO2 Stream Processor. To view the source code of this widget, click here.

Wiring publishers and subscribers

Once the publishers and subscribers are implemented and added to the dashboard, the subscribers need to subscribe for inpt from the required publishers. This is achieved via publisher/subscriber wiring. The following steps demonstrate how the publisher/subscriber wiring is carried out. The Publisher and Subscriber widgets that are shipped with WSO2 SP by default are used in the steps for the purpose of demonstration.

Open the Dashboard designer and drag and drop the Publisher and Subscriber widgets to an existing dashboard. For detailed information, see Generating Widgets.
On the Subscriber widget, click the icon in the top right corner (marked in the image below) to open the Subscriber Configurations panel to the right.
In the Subscriber Configurations panel, select the name of the widget that needs to be considered as the publisher of this widget. In this example, let's select Publisher as shown below.

As a result, messages can be sent from the Publisher widget to the Subscriber widget. If you want the subscriber widget to unsubscribe, you can clear this check box.