Using \$rootScope to share data in Service Portal
In this blog, we will see how we can use $rootScope to share data between widgets via a simple example. Every angular application has a single root scope. All other scopes are descendant scopes of the root scope. Theoretically, if we assign something to a root scope variable, we should be able to access this value inside other widgets as well.
In my previous blog How to communicate between widgets in Service Portal , we created a portal, where we used $rootScope.broadcast to hide/show widgets. Today we will be using the same example, but this time, we will use a root scope variable to achieve this.
So, I am going to start by changing HTML and Client Controller of Widget 1 we created in Step 3.
Step 1: Edit the widget we created in Step 3 (Menu Pills widget)
Please use the below snippets to create your widget
Client Controller:
function($rootScope,$scope,$timeout) {
/* widget controller */
var c = this;
$rootScope.selectedPill = 'requests'; // When page loads, default pill selected
//Let's create an array of objects in root scope here, This array should be available for use inside any of the widgets in this app.
//We will try to access this again later inside other widget
$rootScope.simpSons = [
{
"name":"Homer Simpson",
"title" : "Nuclear Safety Inspector"
},
{
"name":"Bart Simpson",
"title" : "Troublemaker"
}
];
$scope.selectPill = function(selection){
//When the pills are clicked, we change the root scope variable.
$rootScope.selectedPill = selection;
};
}
HTML:
All Requests
Create Request
Contact
As you can see above, we can access $rootScope variable in HTML using $root.
Now let's edit the other three widgets we created in Step 4, 5 and 6
Step 2: Edit Widget we created in Step 4 (All requests widget)
HTML(Only first line edited, everything else is same):
Requests
{{incident.number}}
{{incident.short\_desc}}
The first line of this HTML has ng-if. based on the root scope variable selectedPill, these widgets are shown/hidden.
Client Controller:
function($scope,$rootScope,$timeout) {
/* widget controller */
var c = this;
}
Step 3: Edit Widget we created in Step 5 (Create request widget)
HTML: (Only first line edited, everything else is same)
Create Request
Client Controller:
function($scope,$timeout) {
/* widget controller */
var c = this;
}
Step 4: Edit Widget created in Step 6 (Contact widget)
HTML(Only first line edited, everything else is same):
Contact
Address:
XYZ Company
123 Washington st
Washington
Email:
phone
Client Controller:
function($scope,$rootScope,$timeout) {
/* widget controller */
var c = this;
//Let's try to log the array of objects we created in step 1 here.
console.log(JSON.stringify($rootScope.simpSons));
}
Now that we have edited our widgets to make use of root scope variable. Go ahead and test it out. It should work as before.
And if you check your browser console. You can see the $rootScope.simpSons we logged inside "Contact widget".
This is just a simple demonstration of how we can use $rootScope to share data between widgets.
Thanks,
Sush
https://www.servicenow.com/community/developer-blog/using-rootscope-to-share-data-in-service-portal/ba-p/2270641