How to pass server script from one widget to html of another widget on click of a button in widget 1

[Ankita Kolhe]

Hi Community,

I have a widget 1 with a text box & button Search. So once user fill the text box & click on Search, the server script is processing some script.So I want to send data from this server script to html part of widget 2.

Below is the code for widget 1:-

HTML code:-

<span class="col-md-7"><input id="search_term" name="search_term" type="search" placeholder="Enter Name,GIS ID or DUNS" class="form-control input-md"></span> 

<div class="each-pill" ng-class="{'active':c.selectedPill == 'entitytable'}" ng-click="selectPill('entitytable')">

<a type="button" ng-click="c.searchEntityREST()" class="btn btn-primary">${Search Entity}</a>

</div>

Server script:-

var r = new sn_ws.RESTMessageV2(RESTMessageName, method);

 r.setStringParameterNoEscape('id', id);

 var response = r.execute();

 var responseBody = response.getBody();

 var httpStatus = response.getStatusCode();

var JSONData=JSON.parse(responseBody);

var test= JSONData.gisId+ ' , ' + JSONData.properties.details.address.stateName;

This test value I need to pass to html code(highlighted in black) of widget 2.

Widget 2:-

HTML Code:-

<table class="table table-striped">
<thead>
<tr>
<th>GIS Entity ID</th>
<th>Entity Name</th>
<th>Entity Location</th>
<th>Entity Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="listItem in c.data.listItemData" ng-model="c.data.listItemData">
<td>test value 1</td>
<td>test value 2</td>
</tr>
</tbody>
</table>

Could someone please help me on this?

Thanks,

Ankita

[Joe B2]

I think you may need to change the approach ever so slightly to get this to work. To communicate between widgets on the portal you will need to use a broadcast and a listener.

1. Alter your button to call a client controller function. This function can have a call back to call your server function.
2. In the call back function you can then use $broadcast. This e
3. On your target widget you need an $on function in the client controller to listen to the broadcast and then take action

Example broadcast function

$scope.searchEntityREST = function() {
        c.server.update().then(function(response) {
            $rootScope.$broadcast("$sp.update_widget_2", response.testValue1, response.testValue2);
        });
    }

Example listener function

$scope.$on("$sp.update_widget_2", function($evt, testValue1, testValue2) {
		$scope.testValue1 = testValue1;
		$scope.testValue2 = testValue2;
	});

And then finally you can display these values in your HTML in widget 2 with

<td>{{testValue1}}</td>
<td>{{testValue2}}</td>

The above reads the $scope variables set by the other widget.

This is by no means a definitive solution but hopefully points you in the right direction.

For further information, please see this very helpful article which explains all about communicating between widgets: How to communicate between widgets in Service Portal