LC Blogger: [Analytic Dashboards] Inter Gadget Communication.

In this blog post I'm going to demonstrate you how to build a communication between two gadgets in a dashboard.

Inter gadget communication

Let's think there are two gadgets in a dashboard called Gadget-A and Gadget-B. Through inter gadget communication these two gadgets can talk to each other. In simply the Gadget-A can send a message to Gadget-B and then the Gadget-B can update according to that message.

This is based on publisher-subscriber pattern. In this pattern what happen is the publisher publish a message through a channel and the subscriber listen to this channel and fetch the message and get updated according to the message.

As shown in above diagram a subscriber can subscribes to multiple channels and also publisher can publishes to multiple channels.

Implementation of Example Gadgets.

In this example I created two separate gadget called publisher-gadget and subscriber-gadget. In publisher gadget I created a simple drop down menu. From it we can select a name of a fruit.In subscriber gadget I created a view to display image of the fruit.

When we select a fruit name in publisher gadget then the publisher notify the selected fruit name to subscriber gadget. Then the subscriber gadget fetch the fruit name and display the image of the fruit.

Publisher Gadget.

Create a custom gadget folder inside ,

<DAS_HOME>/repository/server/jaggeryapps/portal/store/carbon.super/gadget/

Here I named my custom gadget folder as "publisher-gadget" . And the folder structure of the publisher gadget is as shown below.

Gadget.json

"id":
"Publisher",

"title":
"Publisher",

"type":
"gadget",

"thumbnail":
"store://gadget/publisher-gadget/index.png",

"data":
{

"url":
"store://gadget/publisher-gadget/index.xml"

},

"notify":
{

"select":
{

"type":
"fruits",

"description":
"This notifies selected fruit name"

}

The highlighted part need to add when the gadget is a publisher. Publisher notify the message through the channel(The Channel name is "select" and you can give a type name as you like.Here the type is fruit) .

Index.xml

</ModulePrefs>

when we implement inter gadget communication we need to import the feature pubsub-2.

List.js

This file includes the javascript code.

//get selected option of the selector
       var selection = $("#fruitList option:selected").text();
       //publish the selected option
       gadgets.Hub.publish('select', {
           msg : selection
       });

We need to include the above highlighted code snippet to publish the message to the subscriber.

Subscriber Gadget

The folder structure of the gadget.

"img" folder contains the all the images which are used in this gadget and "js" folder contains the javascript files.

Gadget.json

{

"id": "subscriber",

"title": "subscriber",

"type": "gadget",

"thumbnail": "store://gadget/subscriber-gadget/index.png",

"data": {

"url": "store://gadget/subscriber-gadget/index.xml"

"listen": {

"state-selected": {

"type": "fruits",

"description": "Used to filter based on state"

}

you need to add above highlighted code snippet to show this is the subscriber gadget. Here "state-selected" indicates the channel which the subscriber is listening and the "type" indicates the type of the data coming through this channel .

Index.xml

Similar to the publisher gadget we need to import the pubsub-2 feature in the subscriber gadget as shown in below code snippet.

</ModulePrefs>

subscriber.js

gadgets.HubSettings.onConnect = function () {

gadgets.Hub

.subscribe(

'state-selected',

function (topic, data, subscriberData) {

});

};

using the above code snippet you can fetch the data in subscriber gadget.

Where “topic” keeps the data about the publisher,“data” keeps the message published by the publisher and “subscriberData” keeps the data about the subscriber.

You can download the source code of two gadgets from here.

After creating these two gadget you need to add them to a dashboard. Then click on settings of the subscriber gadget and then you can see two buttons as shown below.