Passing Data Between Service Portal Widgets Using $emit, $broadcast, and $on

Bhanu Vamshi · 5 hours ago

Passing Data Between Service Portal Widgets 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

Event Type Direction Best For

$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.