Skip to main content

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

Suggest edit
Updated on November 15, 2021

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>
Did you find this content helpful? YesNo

Have a question? Get answers now.

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

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