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
title="Publisher" height="250"
description="Publisher-gadget">
<Require
feature="pubsub-2"/>
</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
title="subscriber" height="250"
description="subscriber-gadget">
<Require
feature="pubsub-2"/>
</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.
Click
on this button and then you will be able to see the check box
with publisher name as shown in below figure.
Please
put the tick in both places. Now click on “view” button on your
dashboard.
Now
you can select a fruit name from publisher gadget and then you can
see the image of the fruit in subscriber gadget.
The
output of this example is as shown in below.
