Communication between Widgets Example

[AndrewLangdon]

Hi there

I've been watching this group with great interest!

I've been wondering if anyone has had a go at chaining widgets together...?

Communication between widgets—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Cheers

Andrew

[GirishYadav]

Hey Andrew,

I am working on an app for Project Planning System which requires several widgets to work in sync. For realtime data sharing and communication between widgets I have used Dojo's Topic framework. Its very simple and robust. One simple example:

To broadcast any data:

topic.publish("signin-complete", this._signInUserInfo);

To receive this data in several widgets:

topic.subscribe("signin-complete", lang.hitch(this, this._signInComplete));

_signInComplete: function () {     
      this.userName = arguments[0].userName;
      this.uEmail = arguments[0].email;
      this.uRole = arguments[0].role;      
    },

However, this type of communication requires both widgets to already be loaded.

The DataManager with Web AppBuilder framework provides an ability to store the published data in a centralized location which can also be used by widgets while loading. Its quite useful in some cases.

-Girish

[StefanP__Jung]

i think using Dojo's Topic framework is a good approach. But be carefull cause it can get very confusing if you have to many events between the widgets.

[BrianO_keefe]

Girish... what did you use to learn Dojo? And did you know Dojo before working with web maps? Or did you have to learn FOR mapping work?

[RobertScheitlin__GISP · Accepted solution]

Andrew,

1.  In the Web AppBuilder 1.3 version there is a an example of widget communication in the client\stemapp\widgets\samplewidgets\WidgetCommunication folder.

2.  you can see the testing module that esri used for the datamanager by going to client\stemapp\jimu.js\tests\test-datamanager.

There is some doh/runner stuff that can get confusing but if you just focus on the publishData and fetchData stuff you can get a pretty good idea. One of the really great things is that you can have your second widget use the listenWidgetIds property and it will listen for publishData calls from your widgetA

          //listenWidgetIds: String[]

          //    app use this property to filter data message, if not set, all message will be received.

          //    this property can be set in config.json

          //About the communication between widgets:

          //  * Two widgets can communicate each other directly, or transferred by DataManager.

          //  * If you want to share data, please call *publishData*. the published data will

          //    be stored in DataManager.

          //  * If you want to read share data, you can override *onReceiveData* method. Whenever

          //    any widget publishes data, this method will be invoked. (communication directly)

          //  * If you want to read the data that published before your widget loaded, you can call

          //    *fetchData* method and get data in *onReceiveData* method. If the data contains

          //    history data, it will be availble in *historyData* parameter.

          //      (transferred by DataManager)

3.  Here is some code snippet of how I am using widget communication in my widgets (using these functions it does not matter if the receiving widget is not open, because when it does open the fetchData is called, but if it is open the the onRecieveData will handle it).

//In the listening widget
startup: function(){
  this.inherited(arguments);
  this.fetchData();
},

onReceiveData: function(name, widgetId, data) {
  if(data.message && data.message === "Deactivate_DrawTool"){
    this.drawBox.deactivate();
  }
},

//in the sending widget
//In one of my functions I have this called before I activate the DrawBox dijit
  aspect.before(this.drawBox, "_activate", lang.hitch(this, function(){
    this.publishData({message: "Deactivate_DrawTool"});
  }));

[AndrewLangdon]

Thanks Robert, yeah just checked out the test widgets - works fine as an example

[Dunn_Jeremy]

Afternoon All,

I'm interested in honouring the time slider output with the summarise widget. Has anyone tried to use these two widgets together ? 

What I am interested in is setting a time window with the time slider widget and then having this data being read by the Summary Widget.

Currently the Summary widget just reads "everything" in the layer and ignores the fact that the time slider has been turned on. It actually just turns the time slider layer off. 

Any thoughts ? 

Regards. 

Jeremy.