Support Article

Pega Web Mashup gadgets do not load in AngularJS dynamic views

SA-15852

Summary



Gadgets created using Pega Web Mashup do not load in web applications using AngularJS framework. The gadgets load only when the DIV HTML tag is already included in the Document Object Model (DOM) tree at page load.


Error Messages



Not Applicable


Steps to Reproduce

  1. Create a web application using AngularJS.
  2. Include Pega Web MashupJavaScripts.
  3. Load the gadget using an AngularJS template.


Root Cause



Pega Gadget Manager defaults to wait for the 'onLoad' event from the browser before initializing the gadget. Event confirmation from the browser only occurs when the initial page is loaded and not when the DOM tree is altered by a dynamic view.


Resolution



Use the following methods to add, remove, or search for new gadgets added to the DOM tree after the 'onLoad' event. These methods are provided by Pega Gadget Manager API and are exposed in the 'pega.web.apinamespace.     

/* 
@api
Remove named gadget, close IFrame, and drop from the gadget hash table
@param $String$sGdtId - gadget id.
@return $void$
*/ 
removeGadget: function(sGdtId) { 
  pega.web.mgr._removeGadget(sGdtId); 
}, 

/*
@api
Initialize new gadget and add to the gadget hash table managed by the manager.
@param $String$sDivId - gadget container div element id.
@param $String$window - document window.
@return $void$
*/ 
addGadget: function(sDivId, oWin) { 
  pega.web.mgr._addGadget(sDivId, oWin); 
}, 

/*
@api
Update all gadgets embedded into the host web page.
@return $void$
*/ 
updateGadgets: function() { 
  pega.web.mgr._updateGadgets(); 


Enable logging on the Pega Gadget Manager.

These methods change the attributes of the gadget dynamically and/or load the gadgets contained in Dynamic views. 

The following screenshot displays the Pega Gadget Manager logs, when a gadget is added to the DOM tree using a Dynamic view.


Pega Gadget Manager logs sample
The course of events displayed in the screenshot is interpreted as:

(Steps 0 - 1) - When the page JavaScript loads the Pega Gadget Manager, gadgets are not found in the DOM tree. 
  • The page JavaScript loads a Dynamic view that contains a gadget.
  • The page JavaScript invokes the pega.web.api.updateGadgets() method to load gadgets that are embedded in the Dynamic view.
(Steps 2 - 6) - Pega Gadget Manager finds and initializes the 'AngJS1' gadget. The gadget is configured with the PegaDefer="true" attribute. This attribute is optional and is not required to reload the gadget.

(Steps 7 - 9) - The page JavaScript invokes the pega.web.api.doAction(“AngJS1”,"load") method and the 'AngJS1' gadget is loaded.

Published October 22, 2015 — Updated February 12, 2019


Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.