Data exchange through Pega WebEmbed

User Experience
1

Hi,

We have an Angular application and loading pega embed on one of the pages. The following code loads the pega Embed on the angular page:

let newDiv = document.createElement("div");

newDiv.setHTMLUnsafe(data.pegaVDRPEmbedScript);

const pegaMashupContainerDiv = document.getElementById("vdrp-mashup-container");

pegaMashupContainerDiv?.appendChild(newDiv);

“pegaVDRPEmbedScript” is the web embed script which we generated from App studio for a pega landing page.

The pega embed script looks like below:

<pega-embed id='vdrpEmbed' action='openPage' pageID='VDRP_2Page' pageClass='samplePegaClass' casePage='assignment' appAlias='sas-pega-poc' pegaServerUrl='sampleURL' autoReauth='true' authService='pega' clientId='67277478603306060011' style='width:100%'></pega-embed>

PEGA embed loads fine on the Angular page. Right now, we have a requirement where we need to exchange data between the web embed and Angular application which is hosting the pega Web Embed.

Following is the requirement:

Web Embed will have a table with a list of records as follows:

Title ID Status
A 123 Completed
B 456 Draft
C 789 Draft

ID column would be a hyperlink, clicking on that hyperlink should pass data from the PEGA Web embed to Angular. Angular will use that id and route the application to a new page with the following URL "http://hostname/123 (When 123 is clicked from the “ID” column). So the link should open the page in the same tab and the routing would be handled by Angular.

Could you please let me know how we exchange between web embed.

Thanks!!!

2

@AvinashV17534056 and I are working on this together.

To add more detail: A page in our existing Angular app embeds a Pega-generated list view page via web embed. One of the cells in the Pega-generated list view contains a URL to another page in the parent Angular app. (i.e. MyAngularApp.com/task/task-123). We do not want to use Pega’s URL field type in the cell because Pega formulates the URL field to open in another browser tab (specifically, Pega sets target=“_blank”). We want to open the Angular URL in the current tab. And, we do not want to refresh the entire page.

The desired behavior is, when the link is clicked, send signal (pub/sub?) to the parent Angular app so that it can navigate to its new page without a full page refresh.

I believe we can accomplish this with a lightweight DX Component to use in the table cell based on this article: How to add custom dx component to listview table in Constellation application | Support Center

Sam