Skip to content

Use the Pega Web Embed with Constellation UI

Jump to bottom
Richard Marsot edited this page Mar 15, 2024 · 8 revisions

Uplus allows to render cases using the Pega Web Embed UI and Constellation UI

image

Pre-Requisite

Before configuring Web-Embed, make sure that

  1. 3rd party cookies are enabled in your browser
  2. Make sure that pop up for the Pega platform URL is not blocked
  3. Same Site settings is set to None in Dev studio - under Configure->System->Settings->Cross-Site Request Forgery

image

If the web-embed takes time to load, check the console.log of your browser for more details - Also check the url bar in your browser, to confirm that pop up are enabled and 3rd party are not blocked by checking the different icons

Configuration

In App Studio, create a new Web Embed Channel web embed channel

enter all the configuration and generate the code snippet - retrieve the clientID and staticContentURL and copy the 2 values under the Settings->General image

In each mashup - you will also need to provide the application name (same as appAlias) and the URL (same as pegaServerURL)

Passing data during initialization

It is possible to set init data when creating a case with Pega Web Embed - This is only for the create use case, not for the open case or open assignment use case - The init data are passed to the web component through the 'startingFields' parameter - see Documentation

The fields you set in the startingFields attribute must be exposed in the DT AllowedStartingFields. For more information, see Adding fields while creating cases in DX API v2.

Here is an example passing 3 fields image

Make sure that the props are listed in AllowedFields DT image

When the case is created - the form is prepopulated with the values image

You can use this approach to set a property to indicate if the case was created with Pega Web Embed and use this as condition for changing the UI.

Note: the parameter 'startingFields' is not visible as attribute to pega-embed tag - to see if the values are correctly passed - you can use dev tools and get the value on the element directly image

Hiding assignment header

When using pega web Embed, it is possible to hide the assignment header that contains the avatar, priority of the assignment and other details image

to hide the header, check the checkbox for each mashup configuration

image

Note: this feature is only supported with Pega 8.9 or higher

Clone this wiki locally