Passing Data Between Widgets in Service Portal Using $emit, $broadcast, and $on
Summary
This article explains how to pass data between ServiceNow Service Portal widgets using AngularJS event handling methods:
$emit, $broadcast, $on, and $rootScope.
The examples include:
Child → Parent communication
Parent → Child communication
Sibling → Sibling communication (using $rootScope)
Widgets shown in this article include:
Emit Child Widget
Emit Parent Widget
Broadcast Parent Widget
Broadcast Child Widget
Sibling communication example
Introduction
In ServiceNow Service Portal, widgets often need to exchange data. Because Service Portal is built on AngularJS, communication is achieved using event-based messaging.
This allows developers to:
Send data upward from child widgets to parents using $emit.
Send data downward from parents to children using $broadcast.
Send data between siblings (no parent-child relationship) using $rootScope.$broadcast.
Listen to any event using $on.
This article provides working widget examples demonstrating these patterns.
1. Child → Parent Communication ($emit)
This pattern is used when a child widget needs to send information to its parent widget.
1.1 Child Emit Widget
HTML
<div class="child-widget">
<h3>Child Emit Widget</h3>
<input type="text" ng-model="c.childMsg" placeholder="Enter message for Parent">
<button class="btn btn-success" ng-click="c.sendToParent()">Send to Parent</button>
</div>
Client Script
api.controller = function($rootScope, $scope) {
var c = this;
c.sendToParent = function() {
$rootScope.$emit('messageFromChild', {
data: c.childMsg
});
};
};
1.2 Parent Emit Listener Widget
HTML
<div class="parent-widget">
<h4>Parent Emit Listener</h4>
<p>Message from Child: <strong>{{c.receivedMsg || "No message yet"}}</strong></p>
<widget id="emit_child_widget"></widget>
</div>
Client Script
api.controller = function($rootScope) {
var c = this;
$rootScope.$on('messageFromChild', function(event, obj) {
c.receivedMsg = obj.data;
});
};
2. Parent → Child Communication ($broadcast)
This pattern is used when a parent widget wants to send data to all child widgets.
2.1 Parent Broadcast Widget
HTML
<div class="parent-widget">
<h3>Parent Broadcast Widget</h3>
<input type="text" ng-model="c.parentMsg" placeholder="Enter message here">
<button class="btn btn-primary" ng-click="c.sendToChildren()">Send to Children</button>
</div>
Client Script
api.controller = function($rootScope) {
var c = this;
c.sendToChildren = function() {
$rootScope.$broadcast('messageFromParent', {
data: c.parentMsg
});
};
};
2.2 Child Broadcast Receiver Widget
HTML
<div class="child-widget">
<h4>Child Broadcast Receiver</h4>
<p>Message from Parent: <strong>{{c.receivedMsg || "No message yet"}}</strong></p>
</div>
Client Script
api.controller = function($rootScope) {
var c = this;
$rootScope.$on('messageFromParent', function(event, obj) {
c.receivedMsg = obj.data;
});
};
3. Sibling → Sibling Communication ($rootScope.$broadcast)
Widgets placed on the same page but not in a parent-child structure cannot communicate using normal $emit or $broadcast.
To enable cross-widget communication, use:
Global Broadcast
$rootScope.$broadcast('eventName', { data: value });
Listener
$rootScope.$on('eventName', function(event, obj) { ... });
3.1 Sibling Widget A (Sender)
api.controller = function($rootScope) {
var c = this;
c.sendToSibling = function() {
$rootScope.$broadcast('siblingMessage', {
data: c.msg
});
};
};
3.2 Sibling Widget B (Receiver)
api.controller = function($rootScope) {
var c = this;
$rootScope.$on('siblingMessage', function(event, obj) {
c.received = obj.data;
});
};
4. Event Flow Summary
| $emit() | Child → Parent | When a child widget must notify its parent |
| $broadcast() | Parent → Child | Send message to all children |
| $rootScope.$broadcast() | Any → Any | Sibling-to-sibling or unrelated widgets |
| $on() | N/A | Listening to all events |
Conclusion
Using $emit and $broadcast events provides a powerful and flexible way to connect Service Portal widgets. These techniques make it easy to create interactive, modular, and scalable UIs.
