LinkedIn
Copied!

Table of Contents

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

Version:

Only available versions of this content are shown in the dropdown

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.

    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()"/>&nbsp &nbsp &nbsp <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.

    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.

    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).

    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 Content

Have a question? Get answers now.

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