Question


American Express
IN
Last activity: 26 Feb 2021 11:57 EST
Custom UI build on React JS (Pega 7.2.2)
Can anyone help me understand how ca i replace the Pega assignment UI with a custom react UI and should still be able to populate the data from Case (WorkObject) details.


Pegasystems Inc.
US


American Express
IN
@RichardMarsot Thanks for the quick response. I have not checked that yet as we are on Pega v7.2.2. Is it supported in 7.2.2 version as well?


Pegasystems Inc.
US
@HimanshuG1. there is no example in 7.2 and there is no support for JSX in 7.2 - Having said that if you build your React component using webpack/rollup/npm toolset and generate the JS bundle that contains both React and your component code, you can use it in 7.2.2 - injecting a React component requires to build a custom control and load some JS files - both functionalities are available in 7.2.2


American Express
IN
@RichardMarsot What i am looking for is-
1. React UI component/modules will be deployed altogether on a separate application.
2. I want to use a kind of headless Pega.
3. What i am not sure about the authorization while using headless pega and also how to move the assignments.
4. Can we still make use of work objects, build flows with assignments, link flow actions to assignments?
5. If we do not build flow rules within Pega, then how do we maintain the state / stages of the objects and how can we achieve the workflow functionalities? At what level the micro-services need to be build?(work object level or assignment level or flow action level)?
6. Where does the sequence logic of displaying the appropriate UI screens in the third party UI frameworks reside? For instance, Pega displays the appropriate flow action with the highest likelihood at the assignment.
7. Can the Pega authorization component be exposed with this micro services approach or should the authorization be completely outside of Pega?


Pegasystems Inc.
US
@HimanshuG1 seems like a lot of new development work done on an old release - I would strongly encourage to upgrade to Pega 8.x and get some of the latest features for this new project
If you have to stay on 7.2.2, you likely will need to create your own API using an http rest service or use the Pega API that is provided OTB
https://collaborate.pega.com/question/default-pega-api-72
https://collaborate.pega.com/question/how-make-use-pega-api-and-engine-api
The Pega API is only getting / sending data independently of the presentation - this is a simpler API than the DX API introduced in Pega 8.1
@HimanshuG1 Have you looked at the UI Gallery in 7.4 or higher - there are 3 examples on how to integrate React JS inside the Pega UI - the example showcases an autocomplete, a timer, and a tictactoe board.