Question

1
Replies
39
Views
Close popover
Katie Lei (KatieL69)
National Australia Bank Ltd

National Australia Bank Ltd
AU
KatieL69 Member since 2018 1 post
National Australia Bank Ltd
Posted: November 11, 2020
Last activity: March 15, 2021

Query regarding React Pega - how to pass parameter dynamically in React Pega to external React

I'm trying to do a project in Pega React, 

It quite similar to Clock Component, Clock Control in Pega React.

for my project in Pega React, i have create below in Pega Section:

2 components  reactpoc_wrapper js reactpoc js

and the component - reactpoc js will call external React to load inside the Pega Section. 

Now, my next step is need to pass parameter dynamically from this pega react Section to the external React that I call which is reactpoc js.

How should I write to pass parameter dynamically from Pega react Section to the external React ?

Also the Control is reactpoc and code is as below:

<pega:choose> <pega:when test="pxRequestor.pyPegaDesignMode != 'true'">   <!-- only include REACT JS once per page - use the bundle 'pzpega_ui_react_dev' for development and 'pzpega_ui_react' for production --> <pega:onlyonce name="pega_ui_react"> <pega:static type="script" app="webwb">   <pega:bundle name="pzpega_ui_react" /> </pega:static> </pega:onlyonce>   <!-- only include this component once per page - will not be reloaded on refresh --> <pega:onlyonce name="pyReactClock"> <pega:static type="script" app="webwb">         <pega:file name="ReactPOC.js"/>    <pega:file name="Reactpoc_wrapper.js"/> </pega:static> </pega:onlyonce>  <%   // Gen unique id for element    String uniqueId = "NabXShellWrapper"+Long.toString(((com.pega.pegarules.priv.context.PegaRequestor) tools.getRequestor()).currentTimeUnique()); %> <div id="<%= uniqueId %>"> </div>  <script>   ReactDOM.render(React.createElement(NabXShellWrapper), document.getElementById("<%= uniqueId %>"));       function receiveMessage(e) {     console.log('receiveMessage', e);   }   window.addEventListener('message', receiveMessage);   /* Clear the state of the component on an Ajax Reload to set the setInterval ticker by calling the unmountComponentAtNode method function */   pega.u.d.registerAsHarnessElement({     nullify: function() {       ReactDOM.unmountComponentAtNode(document.getElementById("<%= uniqueId %>"));     }   }, pega.u.d.getSectionDiv(document.getElementById("<%= uniqueId %>")).getAttribute("uniqueID"));     </script> </pega:when> <pega:otherwise>   <span>XShell React Component</span> </pega:otherwise> </pega:choose>

 

Thanks.

 

Pega Platform 8.4.2 User Experience Financial Services Front-End Developer