Communicate between two widget instances that are of the same widget?

[JennyHu]

Good morning!

I have two widget instances (say A, and B) on a page that are using the same Data Table widget, with different instance options to pull data from different table sources.

When a record is clicked in widget instance A, I would like to pass the sysID of the clicked record to widget instance B to filter dynamically based on the sysID.

My question is.. is it possible to broadcast/emit the event from widget instance A and listen for the event in widget instance B?   How can it be done since there is only one copy of the widget code?

My workaround to this is to clone the widget and customize the widget code a bit so that one widget broadcast, and the other widget listen.   Though, I don't know if this is a best practice since the function of the widget is pretty much the same.

I also thought about creating a wrapper widget and embedded Data Table widget A and B.. it seems more complicated.

Any suggestion is welcome!

Thanks,

Jenny

[theresetor]

Hi Jenny,

Were you able to figure out how to communicate between two instances of the same widget?

I need to do the same, but haven't found anything to point me in the right direction.

Regards

Therese

[Brad Tilton]

You should be able to use the method described in the blog post that Pradeep linked to. The only difference is that instead of two different widgets, you're both broadcasting events and listening for events in the same widget. You would probably also need to pass some sort of parameter like the widget instance id so that the correct widget takes action on the event.

[JennyHu]

Hi Therese,

Using Brad's guidance (thanks b-rad), I did a very simple proof of concept to show that you can indeed communicate between two instances of the same widget.   This example widget will display text entered from the other widget instance (assuming that there are only 2 instances of the same widget on the page).   When I listen to the event in $rootScope.$on, I check to see if the received sysID is the same as the current instance's sysID.   If it's not the same, then I set the messageFromElsewhere variable to the value that was emitted from the other widget instance.   Note: The widget option is just there to visually identify the unique widget instance on the page.

Example Widget

HTML:

<div>
   <h1>User Handle: {{::c.options.userHandle}}</h1>

Send Message:
<input type="text" ng-model="c.data.sometext" ng-change="c.display()"/>

<h2>Message Received: {{ c.data.messageFromElsewhere }}</h2>

<h3>Widget Instance SysId: {{c.data.widgetInstanceSysId}} </h3>

</div>

Client Script:

function($rootScope, $scope) {
       var c= this;
       c.data.messageFromElsewhere = "";

       c.display = function () {                       
               c.data.message = c.data.sometext;

               // Emit the event to other widget
               $rootScope.$emit('myCustomEvent', c.data.message, c.data.widgetInstanceSysId);
       };       
       c.display();

       // Respond to event
       $rootScope.$on('myCustomEvent', function(event, data, sysId) {
               console.log('current instanceID: ' + c.data.widgetInstanceSysId);
               console.log('received instanceID:' + sysId);

               if (sysId != c.data.widgetInstanceSysId) {
                       c.data.messageFromElsewhere = data;
               }
       });

}

Server Script:

(function() {
       // Get the sysID of this widget instance 
       var gr =   $sp.getInstanceRecord();
       var widgetInstanceSysId;       
       if (gr) {
               widgetInstanceSysId = gr.getUniqueValue();
       }       
       data.widgetInstanceSysId = widgetInstanceSysId;               
})();

Option Schema:

[
   {"name":"user_handle","section":"other","label":"User Handle","type":"string"}
]

First Widget Instance:

Widget Parameters:

{
     "userHandle": {
         "value": "Employee",
         "displayValue": "Employee"
   }       
}

Second Widget Instance:

Widget Parameters:

{
   "userHandle": {
         "value": "Manager",
         "displayValue": "Manager"
   }       
}

Hope this helps!

[Brad Tilton]

This looks great!

[Chuck Tomasi]

Nicely done. Looks like you found a great way to make a widget instance unique enough to accept the broadcast event!