Ensure that you reload your mashup after you edit the mashup <div> code so that the changes take effect.

Condition

Changes to a loaded mashup <div> code are not reflected in the behavior of the mashup.

Cause

Changes to the mashup <div> code after the mashup is loaded have no effect because the mashup is already loaded. For example, the following script sets the attributes but does not reload the mashup:

<script src ='http://sample.pega.com/prweb?pyActivity=pzIncludeMashupScripts'></script>

<script>

               function loadMashup(){

                              var mashupDiv = document.querySelector("[data-pega-gadgetname]");


                              mashupDiv.setAttribute("data-pega-action-param-parameters", '{"pzSkinName":"Myapplication", "param1":"value1"}');


                              pega.web.api.doAction("PegaGadget", "load"); // load the mashup gadget on-demand

                              

               }

</script>


<div data-pega-gadgetname ='PegaGadget' 

data-pega-action ='createNewWork' 

data-pega-action-param-classname ='OSWVMA-Myapplication-Work-Case85'

data-pega-action-param-flowname = 'pyStartCase'

data-pega-isdeferloaded ='true' 

data-pega-applicationname ='Myapplication' 

data-pega-threadname ='MashupThread' 

data-pega-resizetype ='stretch' 

data-pega-url ='http://sample.pega.com/prweb' 

data-pega-action-param-parameters ='' ></div>


<button onclick="loadMashup()">Load Mashup</button>

Solution

• Load the mashup again after editing the mashup <div> code so that the new attribute settings take effect. Edit the code before the window load event is triggered and before gadget registration.

  For example:

  
  
  <script src ='http://sample.pega.com/prweb?pyActivity=pzIncludeMashupScripts'></script>
  
  <script>
  
                 function loadMashup(){
  
                                pega.web.api.doAction("PegaGadget", "load"); // load the mashup gadget on-demand
  
                                
  
                 }
  
  </script>
  
  <div data-pega-gadgetname ='PegaGadget' 
  
  data-pega-action ='createNewWork' 
  
  data-pega-action-param-classname ='OSWVMA-Myapplication-Work-CamCase84'
  
  data-pega-action-param-flowname = 'pyStartCase'
  
  data-pega-isdeferloaded ='true' 
  
  data-pega-applicationname ='Myapplication' 
  
  data-pega-threadname ='MashupThread' 
  
  data-pega-resizetype ='stretch' 
  
  data-pega-url ='http://sample.pega.com/prweb' 
  
  data-pega-action-param-parameters ='' ></div>
  
  
  <script>
  
                 (function setParameters(){
  
                                var params = {};
  
                                params.UserIdentifier = "cherj";
  
                                params.Password = eval("btoa('sample')");
  
                                document.querySelector("div[data-pega-gadgetname='PegaGadget']").setAttribute("data-pega-action-param-parameters", JSON.stringify(params)="");
  
                 })();
  
  </script>
  
  
  <button onclick="loadMashup()">Load Mashup</button>