Question

Embedding Web Apps into Pega UI

Is there a capability to mashup web apps into the Pega UI, kind of a flip side use case to Pega Web Mashup? One example of this might be something like a calendar/tracking app (Asana, Google Calendars, etc.) being embedded along with other Pega standard dashboard widgets. It sounds like building a custom integration and UI would be possible, but not particularly easy.

***Edited by Moderator Marissa to update platform capability tags****

Correct Answer
January 10, 2019 - 2:57pm

The best way to do this is to use the Specialty Components capability provided in the platform. Using specialty components, the code is directly injected within the Pega UI DOM. A specialty component is configured as a section with the Specialty component setting enabled on the HTML tab of the Section rule form. The specialty component can be incorporated almost anywhere in your application. It supports rule specialization and resolution and promotes reusability.

You can also provide configuration capabilities within it, such that the property panel for that component can have those configurations exposed to the developer.  That would ensure the component is reusable. 

You can see more details on Specialty components here: https://community.pega.com/knowledgebase/articles/creating-specialty-components-pega-7-platform

Additionally, depending on the interactivity required in the component with the rest of Pega, you can also use the Pega JS APIs.  You can find more information here: https://community.pega.com/knowledgebase/articles/public-javascript-api-control-actions

In cases where you are displaying a webapp or another prebuilt piece of UI, your specialty component can be built as a reusable webapp container component, such that it takes a URL and any additional parameters.  The specialty component can merely generate an iFrame with the URL and parameters passed into it.  

Comments

Keep up to date on this post and subscribe to comments

Pega
January 7, 2019 - 3:36pm

Hi Yewr

As far as I know, what you are requesting (capability to mashup web apps into Pega UI) is not possible at the moment unless you write custom javascript. 

Pega
January 10, 2019 - 2:57pm

The best way to do this is to use the Specialty Components capability provided in the platform. Using specialty components, the code is directly injected within the Pega UI DOM. A specialty component is configured as a section with the Specialty component setting enabled on the HTML tab of the Section rule form. The specialty component can be incorporated almost anywhere in your application. It supports rule specialization and resolution and promotes reusability.

You can also provide configuration capabilities within it, such that the property panel for that component can have those configurations exposed to the developer.  That would ensure the component is reusable. 

You can see more details on Specialty components here: https://community.pega.com/knowledgebase/articles/creating-specialty-components-pega-7-platform

Additionally, depending on the interactivity required in the component with the rest of Pega, you can also use the Pega JS APIs.  You can find more information here: https://community.pega.com/knowledgebase/articles/public-javascript-api-control-actions

In cases where you are displaying a webapp or another prebuilt piece of UI, your specialty component can be built as a reusable webapp container component, such that it takes a URL and any additional parameters.  The specialty component can merely generate an iFrame with the URL and parameters passed into it.  

Pega
January 12, 2019 - 12:27pm
Response to kamav

Thank you, Vinay.  This is very helpful.