Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

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 Mashup JavaScripts.
  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 February 12, 2019 - Updated October 8, 2020

Was this useful?

0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us