Widget To Widget Communication

[Sagar_pawar]

Hello All,

I have written a script to pass data from one widget to another widget but when I click on submit button in the second widget I am not receiving data on the same page. can anyone please guide me on this?

Thank You.

Widget 1 

---------------------------------

HTML

<div>
Name<input type="text" ng-model='c.getdata'">
<button ng-click="c.func1()"> click me</button>
</div>

------------------------------

Client SCript

api.controller=function($rootScope,$scope) {
/* widget controller */
var c = this;
c.func1=function()
{
c.data.test=c.getdata;
var data=c.data.test;
alert(data);
$rootScope.$broadcast('key',data);

}
};

======================================

Widget 2

-----------------------

HTML

<div>
Name<input type="text" value={{c.getData}}>
</div>

-----------------------------------

Client Script

api.controller=function($rootScope,$scope) {
/* widget controller */
var c = this;
$rootScope.$on('key',function(event,data1)
{

c.getData=data1;

});


};

[Laszlo Balla]

You are sending:

$rootScope.$broadcast('key',data);

But in the second widget you have data1 in the processing function. It should also be data.

Also, you might be better off using $rootScope.$emit instead of$broadcast.

[kmohammed]

Here are the detailed steps to deploy the code for passing data from one widget to another widget in ServiceNow:

1. Navigate to the "System UI" module in ServiceNow and create a new widget by clicking on "Create New" and selecting "Widget".
2. Add the HTML code in the "HTML" section of the first widget. This code includes the input field to capture the data and a button to trigger the function to pass the data.
3. Add the client script code to the first widget. This script includes the function to capture the data entered in the input field and broadcast it using $rootScope.
4. Create another widget and add the HTML code which includes the input field to display the data passed from the first widget.
5. Add the client script code to the second widget. This script includes the function to listen for the broadcasted data from the first widget and assign it to the input field in the second widget.
6. Save and publish both the widgets.
7. Navigate to the Service Portal and add both widgets to the page.
8. Test the functionality by entering data in the input field of the first widget and clicking the button. The data should be displayed in the input field of the second widget.

Note: Ensure that you have the required permissions to create and edit widgets in ServiceNow.

1. Adding error handling: Currently, there is no error handling in the code. It is always recommended to add error handling in the code to handle any unexpected errors and provide meaningful error messages to the user.

2. Utilizing $emit and $on events: In the current implementation, $broadcast event is used. However, it is always better to use $emit and $on events to pass data between widgets as it makes the data flow more structured and reduces the risk of data getting lost.

3. Using services: Instead of using $rootScope, it is recommended to use services to share data between widgets. Services provide a centralized place to store data, making it easier to manage and maintain the code.

4. Adding a check for data validity: Before broadcasting or emitting the data, it is a good practice to validate the data to ensure it is valid and meets the requirements.

5. Using angular data binding: The code can be enhanced by using angular data binding to bind the data to the HTML elements. This way, the data will automatically be updated in the HTML elements whenever it changes in the controller.
   
   

6. Use a named function instead of an anonymous function for the $rootScope.$on event listener to improve code readability and debugging.

7. Validate user input in Widget 1 before emitting the data.

8. Add error handling for the $rootScope.$on event listener in Widget 2 to ensure that the code does not break in case of any exceptions.

9. Use AngularJS $timeout service to delay the code execution and give time for the second widget to subscribe to the event.

10. Use AngularJS $emit service instead of $broadcast service to send data from Widget 1 to Widget 2 as it will only propagate the event upwards through the scope hierarchy.

Here's the updated code:

Widget 1

HTML

<div> Name<input type="text" ng-model='c.getdata'"> <button ng-click="c.func1()"> click me</button> </div> ------------------------------ Client SCript api.controller=function($rootScope, $timeout, $scope) { /* widget controller */ var c = this; c.func1 = function() { if (c.getdata) { c.data.test = c.getdata; var data = c.data.test; $timeout(function() { $rootScope.$emit('key', data); }, 0); } else { alert('Please enter a value in the text field'); } }; };

Widget 2

HTML

<div> Name<input type="text" value={{c.getData}}> </div> ----------------------------------- Client Script api.controller=function($rootScope, $timeout, $scope) { /* widget controller */ var c = this; var getDataListener = $rootScope.$on('key', function(event, data1) { c.getData = data1; });

$scope.$on('$destroy', function() { getDataListener(); });

};