Embedded widget messaging

Embedded applications can register to be notified when the following happens:

• The application theme changes
• The application locale changes
• The application sends a general notification (client-side)
• Another embedded widget on the page sends a cross-origin event

The following is the API for registering and unregistering for application events:

// Register for a particular Pebbles notification. notificationType must be one of 0, 1 or 2:
// For 0, LOCALE_CHANGED the notification info will contain the Pebbles locale e.g: {"locale":"en_US"}
// For 1, THEME_CHANGED the notification info will contain the Pebbles theme id e.g: {"themeId":"gw-theme--green-white-web"}
// For 2, GENERAL the notification info is whatever object was specified to the Pebbles sendGwNotificationEventToAllTargetWindows call
GwCrossOriginExternal.addCallbackForGwNotificationType(notificationType, function(notification) {
  console.log("Notified: " + notificationType + " info =" + JSON.stringify(notification.info));
});
 
// Unregister for a particular Pebbles notification
GwCrossOriginExternal.removeCallbackForGwNotificationType(notificationType);

For embedded widgets to send cross-origin events to each other, use EmbeddedWidgetRef elements to provide a mapping from the PCF widget IDs to the embedded widget namespace. For example, suppose there are two embedded widgets on the same page, one with the PCF ID Embedded1, and the other with the PCF ID Embedded2. You can make Embedded1 known to Embedded2 by adding the following widget reference to the Embedded2 configuration:

<EmbeddedWidgetRef name="other" widget="Embedded1"/>

The following are the APIs for messaging across embedded widgets:

// Broadcast an event with the given name and payload to whoever is listening. Returns a promise that can be used for error checking
GwCrossOriginExternal.broadcastCrossOriginEvent(eventName, jsonObject);
 
// Add a listener for the named event from the named source. An eventName of "*" means any. Returns a promise for error checking
GwCrossOriginExternal.addCrossOriginEventListener("other", eventName, function(event) {
  console.log(event.broadcasterWindowId + " sent event " + event.eventName + ": " + event.info)
});
 
// Remove the listener for the named event from the named source
GwCrossOriginExternal.removeCrossOriginEventListener("other", eventName);