Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Mashup issues with cross-domain (X-Frame) communication

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Learn about the most commonly encountered issues with communication between your mashup and the host page, and discover the ways to address them.

Condition

The communication between the gadget and the host is broken, which results in problems with resizing or loading.

Solution

  • If the gadget is not responding to the host page messages, which causes issues with resizing, ensure that the host page domain is added to the allow list of the application.
    For more information about adding the URL of your page to the allow list, see Creating a mashup.
  • Use the getGadgetData() and setGadgetData()functions to communicate with the gadget.
    For example: 
    pega.web.api.doAction("GADGETNAME", "getGadgetData", "[pyWorkpage.Property]", {callback:function(){},scope:scope}); pega.web.api.doAction("GADGETNAME", "setGadgetData", "[pyWorkpage.Property]", "value",{callback:function(){},scope:scope}); pega.web.api.doAction("GADGETNAME", "getGadgetInfo", {callback:function(){},scope:scope}); <!DOCTYPE html> 
<html>
   <head>
      <script> var mycallback = function(responseData){ var myClassName = responseData; document.getElementById("valueFromGadget").value = myClassName; pega.web.api.doAction("GadgetB", "load"); document.getElementById("GadgetBLoaded").style.display="block"; }; var mysetcallback = function(responseData){ pega.web.api.doAction("PegaGadget", "getGadgetData", "pyWorkPage.FirstName",{callback:mycallback}); var myClassName = responseData; document.getElementById("valueFromGadget").value = myClassName; }; function setonGadgetA(){ var valueFromPegaGadget= pega.web.api.doAction("PegaGadget", "setGadgetData", "pyWorkPage.FirstName", "OSWVMA-WW84Cam-Work-CamCase }; function readFromGadgetA(){ var valueFromPegaGadget= pega.web.api.doAction("PegaGadget", "getGadgetData", "pyWorkPage.FirstName",{callback:mycallback}); } </script> 
   </head>
   <body>
      <!-- ********************** Begin Pega content ********************** --> <script src ='http://sample.pega.com/prweb/app/default/?pyActivity=pzIncludeMashupScripts'></script> <input type="button" value="Set class on Gadget A and load Gadget B " onclick="setonGadgetA()"/>      <label>Class is set to: </label> <input type="text" value="" id="valueFromGadget" name="valueFromGadget"/><br><br> <div data-pega-gadgetname ='PegaGadget' data-pega-action ='createNewWork' data-pega-action-param-classname ='OSWVMA-Myapplication-Work-Case84' data-pega-action-param-flowname ='pyStartCase' data-pega-isdeferloaded ='false' data-pega-applicationname ='Myapplication' data-pega-threadname ='MashupEvents' data-pega-resizetype ='stretch' data-pega-url ='http://sample.pega.com/prweb/app/Dummy_0309/' data-pega-action-param-parameters ='{"pzSkinName":"MyLocalApp","pyMashupSkeletonName":"pyDefaultMashupSkeleton","UserIdentifier":"anans4", 
      <div data-pega-gadgetname ='GadgetB' data-pega-action ='createNewWork' data-pega-action-param-classname =[page/name/valueFromGadget] data-pega-action-param-flowname ='pyStartCase' data-pega-action-param-model ='' data-pega-isdeferloaded ='true' data-pega-applicationname ='Myapplication' data-pega-threadname ='STANDARD12' data-pega-resizetype ='stretch' data-pega-url ='http://sample.pega.com/prweb/app/Dummy_0309/' data-pega-action-param-parameters ='{"pzSkinName":"MyLocalApp","pyMashupSkeletonName":"pyDefaultMashupSkeleton","UserIdentifier":"anans4", <!-- ********************** End Pega content ********************** --> <br> <div id='GadgetBLoaded' style='display:none;'>Gadget databinding is success</div>
      <br> 
   </body>
</html>

    In the example, gadget A loads with the host page. Upon clicking a button on the host page, the setGadgetData function is invoked to set the class name on gadget A. Then, the getGadgetData function reads the class name from gadget A and provides the value in the input field on the host page. The page then loads gadget B.

    Note:

    If you use data bindings, then square brackets [ ] are required for the [pyWorkPage.pzInsKey] property.

    Use the following data binding syntax:

    • [page/id/elementName]
    • [page/name/elementName]
    • [page/function/token]
    • [gadget/gadgetName/property]

    If you do not use data bindings, then square brackets are not required for the parameter syntax.

    Note: For Pega Platform 7.3 and later, include the callback function. For more information, see the support article Mashup: getGadgetData, setGadgetData, getGadgetInfo not working.
  • To ensure a successful transfer of data from the mashup to the host, in the website host page, add the data-pega-event-oncustom attribute in the mashup code snippet with a JavaScript callback. In the mashup, use the JavaScript callback to send messages to the host (UserWorkForm rule).
    For example: To invoke a custom event from a mashup, use the following script on the host page: pega.desktop.gadgetCustomEvent("send some message to the host")
    <script> 
   function onMashupData(gadgetName, message) { 
   //message received will be "send some message to the host" }
</script>
<div data-pega-gadgetname ='PegaGadget' data-pega-action ='createNewWork' data-pega-action-param-classname ='OSWVMA-WW84Cam-Work-CamCase84' data-pega-action-param-flowname = 'pyStartCase' data-pega-isdeferloaded ='false' data-pega-applicationname ='WW84Cam' data-pega-threadname ='MashupThread' data-pega-resizetype ='stretch' data-pega-event-onclose='onCloseHandler' data-pega-event-oncustom='onMashupData' data-pega-url ='http://sample.pega.com/prweb/app/appname' data-pega-action-param-parameters ='{"UserIdentifier”:"user1","Password”:”xyzzy"}' ></div>

Related articles

Mashup attributes

Tags

Pega Platform 8.6 User Experience

Have a question? Get answers now.

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

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us