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:
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.
Updated: 15 Mar 2021 16:05 EDT
Pegasystems Inc.
US
@KatieL69 you can look at the UI Gallery example. the TicTacToe example showcases how the size of the tictactoe rendered using Pega UI and the dropdown auto-generated control can pass the size of the tictactoe back to the React component - in the clock example, the timezone is also passed to the React component
ReactDOM.render(React.createElement(Clock, {'timezone': '<p:r n="param.timezone"/>' }), document.getElementById("<%= uniqueId %>"));
