Search code examples
angularpega

How to integrate an IHM from PEGA in an ANGULAR project?

Did anyone of you try to integrate a template from PEGA in his Angular project ?

I will explain for you what i did so far : 1- I added the Pega's script url in my index.html 2- I added the html code that holds all the pega parameters to display its template in the component where I want the template to be shown. 3- The connection to Pega wa successful but didn't show anything

And finally, I added the pega html code here and deleted the "root" to test the connection to Pega template directly Is it an architectural or compatibility issue? I'm confused because it's the first time that I'm doing this and didn't find any tutorials or examples for this use case ^^'

Solution

  • There are multiple ways you can integrate the external UI with a Pega Process Flow:

    • Creating Custom Services: In this scenario, the UIs are created in Angular and the process/activities are exposed as services(wrapper). The challenge is, additional custom services have to be created/maintained. It also demands for separate token & session management to avoid orphan threads or objects getting created in Pega. The UI screens are only created in the Angular layer. Note: The best usage of Pega's capabilities are not done in this case.
    • Leverage Pega Mashups: Integrate the UI screens created in Pega to be embedded and integrated with the external UIs leveraging iframes or gadgets. It is best suited to integrated applications in an enterprise portal built leveraging a UI stack of choice. In some cases the UX, colour schema and customizations needs to be validated - for a uniform experience.

    • Leverage Pega DX APIs from ver8.x onwards: In the Pega Infinity Platform and from version 8.x onwards Dx APIs are provided for Angu;ar/React & Vue frameworks. The advantage is the screens can still be developed in Pega using OOTB features and the same can be rendered flawlessly in the Angular UI. But, note: there are few components that are not supported. This is to be validated based on the application being designed to make an informed decision.