Support Article
Pega Web Mashup gadgets do not load in AngularJS dynamic views
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
- Create a web application using AngularJS.
- Include Pega Web Mashup JavaScripts.
- 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.api' namespace.
/*
@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.
The course of events displayed in the screenshot is interpreted as:
- 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 7 - 9) - The page JavaScript invokes the pega.web.api.doAction(“AngJS1”,"load") method and the 'AngJS1' gadget is loaded.
Published February 12, 2019 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.