How to communicate between two widget?

Jeet · ‎12-20-2016

How to communicate within two widget, I have done some POC. Writing small example to understand the way of communication within two widget.

If You hv found this helpful, guys please vote

Jeet · ‎12-20-2016

Here I am going step by step - Taking a simple example for incident.

Task :- 1. Create first widget - that contains List Of Incident

2. Create second widget - that contains form to populate the corresponding field of clicked incident in First widget

1. Creating first widget - widget one

HTML Template -

<div class="widgetone">

<h1>INCIDENT LIST TABLE</h1>

<table class="rwd-table">

<tr >

<th>INCIDENT NO</th>

<th>OPENED DATE</th>

<th>IMPACT</th>

<th>ASSIGNED TO</th>

<th>CONFIGURATION ITEM</th>

<th>SHORT DESCRIPTION</th>

</tr>

<tr ng-repeat="item in c.data.incidents" ng-click="selectItem(item)">

<td data-th="INCIDENT NO">{{item.incidentno}}</td>

<td data-th="OPENED DATE">{{item.openeddate}}</td>

<td data-th="IMPACT">{{item.impact}}</td>

<td data-th="ASSIGNED TO">{{item.asgnTo}}</td>

<td data-th="CONFIGURATION ITEM">{{item.cmdb_ci}}</td>

<td data-th="SHORT DESCRIPTION">{{item.shrtDesc}}</td>

</tr>

</table>

</div>

Server Script -

(function() {

data.incidents = [];

var gr = new GlideRecord('incident');

gr.query();

while(gr.next()){

item = {};

item.incidentno = gr.getValue('number');

item.openeddate = gr.getValue('opened_at');

item.cat = gr.getValue('catgory');

item.cmdb_ci = gr.getDisplayValue('cmdb_ci');

item.asgnGroup = gr.getDisplayValue('assignment_group');

item.asgnTo = gr.getDisplayValue('assigned_to');

item.impact = gr.getValue('impact');

item.shrtDesc = gr.getValue('short_description');

data.incidents.push(item);

}

})();

Client Controller -

function($scope,$rootScope,$timeout) {

/* widget controller */

var c = this;

//broadcast the selection when ever cliked on each incident

$scope.selectItem= function(incidentObj){

alert(incidentObj);

c.selectedIncident= incidentObj;

$rootScope.$broadcast('showIncidentDetails', incidentObj);

};

}

2. Creating second widget - widget two

HTML Template -

<div>

<h1>INCIDENT DETAILS FORM</h1>

<form class="cf">

<div class="half left cf">

<input type="text" id="input-no" placeholder="{{showForm.incidentno}}">

<input type="text" id="input-date" placeholder="{{showForm.openeddate}}">

<input type="text" id="input-IMPACT" placeholder="{{showForm.impact}}">

<input type="text" id="input-asgnto" placeholder="{{showForm.asgnTo}}">

</div>

<div class="half right cf">

<input type="text" id="input-cmdbci" placeholder="{{showForm.cmdb_ci}}">

<textarea name="message" type="text" id="input-message" placeholder="{{showForm.shrtDesc}}"></textarea>

</div>

<input type="submit" value="Submit" id="input-submit">// This is another operation

</form>

</div>

Client Controller -

function($scope,$rootScope, $timeout ) {

/* widget controller */

var c = this;

$scope.showForm = "";

//Listening for "showIncidentDetails" event

$rootScope.$on('showIncidentDetails', function(event,data) {

$scope.showForm= data;

});

}

Guys here you can make your table and form interactive Using CSS, This HTML code I am posting here without any CSS.

Please vote if it is helping you.

Regards,

Jeet.

View solution in original post

salu · ‎01-12-2017

jeet2010

Hello Jeet,

How can I get the value which selected in the catalog item widget in to my macro-widget?

If I can able to access in my custom widget,using ng-show I can do my things workable.

Thanks

Saranya

Jeet · ‎01-12-2017

Hi salu,

Yeah you are right you can use ng-show or ng-if that's what I need to check

just I saw your comment.

While you are selecting a catalog item if it is eligible for that to show

your macro field you can apply some ng-show or ng-if to that element.

Better you use ng-if, Check that how to use ng-if inside any text box or element. You can proceed m also checking

Regards,

Jeet

salu · ‎01-12-2017

Hello Jeet,

Thank you for looking in to it.

I am not able to find a way how to check in the custom widget which catalog item I have choosed?

Thanks

Saranya

Jeet · ‎01-12-2017

Hi Salu,

What you can do !! Just pass extra field with some value or field itself from first widget controller ( depends on your catalog item you choose ) to second widget controller and pick that value to pass in if condition.

One Way : Write some condition so that only for selected catalog you pass the value to second widget.

Second Way : or create one more field like show macro field (Boolean) to your catalog variable or item whatever and pass that value to second widget if that is true show that macro field or leave it.

for ex: use ng-if

<input type="checkbox" ng-model="myVar" ng-init="myVar = true">

<div ng-if="myVar">

<h1>Welcome</h1>

<p>Welcome to my home.</p>

<hr>

</div>

<p>The DIV element will be removed when the checkbox is not checked.</p>

<p>The DIV element will return, if you check the checkbox.</p>

PS: Check this way you can do or not?

Regards,

Jeet.

Mr world wide · ‎12-14-2021

Working Demo if in case anyone wants to see how it will work: