Pega React component
In the UI gallery, Angular and React components are provided. Now, my query is - can we refer an existing React component (built outside) from Pega section or, we need to build the React component inside Pega itself ? Please provide steps how Pega can refer existing external React component?
***Edited by Moderator Marissa to update platform capability tags****
Accepted Solution
Pegasystems Inc.
US
If you use the clock example in the React component. here is the most simple example
you don't need the render function - the render method should be in your custom control - see the clock example: it has a custom control and a React component. It should be good enough to get started.
Pegasystems Inc.
IN
Hi Seth,
Kindly let me know if I have understood your case correctly.If you are trying to use the default components of pega from UI gallery to the section which you have configured.you can open view design time configurations and do a saveas into your class and use it.
find the screenshot attached.
Let me know if I have understood correctly.
Tata Consultancy Services
IN
Hi,
My query is slightly different, specifically for React components built outside Pega. In my scenario, there are react.js components already defined by client non-Pega team outside Pega. Now, if some of those components (kept in same/different domain, can be accessed by https:) can be used inside Pega UI/section, can we reference them somehow? These components are enhanced regularly, so if we copy them in Pega, retrofitting needed. But if we can reference them from Pega, no retrofitting required.My query is - this external referencing to non Pega React components are possible?
Regards,
Santanu
Updated: 28 Nov 2018 22:13 EST
Tata Consultancy Services
IN
Hi,
My query is slightly different. In my scenario, there are react.js components already defined by client non-Pega team outside Pega. Now, if some of those components (kept in same/different domain, can be accessed by https:) can be used inside Pega UI/section, can we reference them somehow? These components are enhanced regularly, so if we copy them in Pega, retrofitting needed. But if we can reference them from Pega, no retrofitting required.My query is - this external referencing to non Pega React components are possible?
Regards,
Santanu
Pegasystems Inc.
US
yes it is possible to source React component from an external system.
using the UI gallery example - open the custom control py_react_autocomplete
you will see the following lines at the top that loads JS from your Pega platform
<!-- 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 -->
<pega:onlyonce name="pyReactAutocomplete">
<pega:static type="script" app="webwb">
<pega:file name="py_react_autocomplete.js"/>
<pega:file name="py_react_autocomplete_ctl.js"/>
</pega:static>
</pega:onlyonce>
<pega:static type="style" app="webwb">
<pega:file name="py_react_autocomplete.css"/>
</pega:static>
you could for example source The autocomplete React library from an external system by replacing the line above by:
yes it is possible to source React component from an external system.
using the UI gallery example - open the custom control py_react_autocomplete
you will see the following lines at the top that loads JS from your Pega platform
<!-- 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 -->
<pega:onlyonce name="pyReactAutocomplete">
<pega:static type="script" app="webwb">
<pega:file name="py_react_autocomplete.js"/>
<pega:file name="py_react_autocomplete_ctl.js"/>
</pega:static>
</pega:onlyonce>
<pega:static type="style" app="webwb">
<pega:file name="py_react_autocomplete.css"/>
</pega:static>
you could for example source The autocomplete React library from an external system by replacing the line above by:
<!-- 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 -->
<pega:onlyonce name="pyReactAutocomplete">
<script src="https://unpkg.com/[email protected]/dist/standalone/autosuggest.js"></script>
<pega:static type="script" app="webwb">
<pega:file name="py_react_autocomplete_ctl.js"/>
</pega:static>
</pega:onlyonce>
<pega:static type="style" app="webwb">
<pega:file name="py_react_autocomplete.css"/>
</pega:static>
similar things could be done for the CSS (sourced externally) or other React componentd. As long as the remote source file is transpiled by Babel so that it is not a JSX file, it should work. In this scenario, the only thing that you need to create in the Pega Platform is the custom control so that you can drop the component in your layout
Tata Consultancy Services
IN
Hi Richard,
Can you please provide steps to use a basic hello world react script in a section.
I have created custom control in pega and calling .js file in control.
What should be the exact code inside custom control?
.js file contains jsx code as below,
class Hello extends React.Component {
render() {
//JSX code in return function
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
render(<Hello/>, document.getElementById('app'));
Regards,
Deepali
Accepted Solution
Pegasystems Inc.
US
If you use the clock example in the React component. here is the most simple example
you don't need the render function - the render method should be in your custom control - see the clock example: it has a custom control and a React component. It should be good enough to get started.
Pegasystems Inc.
US
more detailed answer - https://collaborate.pega.com/question/how-use-react-pega