Pega Web Mashup

What is a pega web mashup?

Pega platform provides a feature to embed pega application in any web page or web application on the intranet or internet. We can embed our pega application through pega mashup which actually exchanges information between two applications. Pega application can communicate to the host page (web application or web page) and the host page can communicate to the pega platform application. Pega web mashup code is HTML-5 compliant. 

What are actions can be defined in the Mashup code?

When we embed a mashup code in any web application, the user experience is the same as the Pega application experience. We can define below a set of common actions in a mashup application. 

• Create a new case
• Get Next Work
• Open an existing case
• Displaying dashboard
• Displaying worklist
• Performing an assignment

Scenario:

In this post, we will see how we can embed a sample Pega Service Request application on a website (https://www.pegahelp.com/) and will try to create a case and see all other actions in the embedded application.

Creating a Pega Web Mashup

In order to embed our pega application on a website, we need to generate a web mashup code in Pega and embed the HTML code on the website in an appropriate place. We can generate web mashup code in both Dev and App studios. First, we need to create a Mashup channel, Customize the code and Embed mashup code on a website or web page or web application.

Create a Mashup channel

Configure Web Mashup form

We need to fill in the details before generating the mashup code.

Name of the Mashup

Description

URL - It defaults to the current pega platform URL, we can change this as per our requirement to reference other systems ( like QA or Production). Used localhost URL (personal edition URL).

Action - We need to select the action to be performed by the mashup. By default "Create Case" action is selected and we can select other actions as shown below.

When we select each action we need to provide information accordingly. See the below screen for details we need to provide for each action.

Here, we are displaying a page (caseworker portal harness) to create a new case or to access the work list and other reports.

Once we select the action and filled related attributes information, we can provide other information regarding Thread name(where the action is performed), Skin (to format the mashup application content), size (size of the embedded application), skeleton, defer load.

Generate mashup code

After providing all details in the web mashup form click on the "Generate mashup code" button. Pega will generate a mashup code.

Mashup code

 iframe code

<iframe name ='PegaGadgetIfr' id ='PegaGadgetIfr' data-pega-iframe-gadgetname ='PegaGadget' data-pega-resizetype ='stretch' style= 'height: 400px; width: 100%;' src ='http://localhost:8080/prweb/PRServlet/app/ServiceRequest/!TPapp/?pzuiactionzzz=CXtpbn1VaVRRTFNTMlhxNWt0WW1HQ3drdkdKRmU4Uk9adkZ6d1VVcHBsWVBtMXpZb3p3eUR6SXdJNG1JdDBNekpTSkRFbXpiczNEM3pOeXoyUmM1NzBSRC9vR2pFWFNzeVpmbmZCWEJLbG0xbW9jajV1cUlGVHhqbGVJRHJ3OElIUGI2YnM1OUpZVkMyTFUyYzZyUW5ZY05PdGNZaU9idE1NQXBGdDBuZk1vcXV6YkNvUmQ4Mmw5L2RRTjlPZm1vcXpRTXQvZHBURnF4ZDhzR1UybUtJMWJGUDFtSStmaHlIRVRNK3FvYVl4WDVESjNSRFIrb2JWendrSUIvd0IwUDZGNVZrcTBwd1Z4WHptaElwSnlHZ2RqT0NpcDRGRUFyRG1LN0Q2Qy9yNVIxYWdicXJrOEpnUmtOV1hoVGtGUm16aHlhcg%3D%3D*' ></iframe>

<script src ='http://localhost:8080/prweb/PRServlet/app/ServiceRequest/?pzuiactionzzz=CXtpbn1yMFBJemI1TEs4ZWF1S05ieUVOdnduMDN1LzBJOURiclJ4RGQ0Wnh0RmN0VVdlVm0wanZuRDBvRC96b2ZSSmxn*'></script>

Mashup code

<!-- ********************** Begin Pega content ********************** -->

<script src ='http://localhost:8080/prweb/PRServlet/app/ServiceRequest/?pzuiactionzzz=CXtpbn1yMFBJemI1TEs4ZWF1S05ieUVOdnduMDN1LzBJOURiclJ4RGQ0Wnh0RmN0VVdlVm0wanZuRDBvRC96b2ZSSmxn*'></script>

<div data-pega-encrypted ='true' 

data-pega-encrypted-hash = 'pzuiactionzzz=CXtpbn1VaVRRTFNTMlhxNWt0WW1HQ3drdkdKRmU4Uk9adkZ6d1VVcHBsWVBtMXpZb3p3eUR6SXdJNG1JdDBNekpTSkRFbXpiczNEM3pOeXoyUmM1NzBSRC9vR2pFWFNzeVpmbmZCWEJLbG0xbW9jajV1cUlGVHhqbGVJRHJ3OElIUGI2YnM1OUpZVkMyTFUyYzZyUW5ZY05PdGNZaU9idE1NQXBGdDBuZk1vcXV6YkQxaE1xMkJwemk0QjhuR1JtYktyeElpUWRsUDZybXZqWDMzalFYa3pVQXpHWDNHVHYzVkk5NVBSZHNXZmdCTjU1cmxjZnJSZUJQbE0xcUlHTjQxYmt2TVRZWEtWOFFWWEo3RXA4Q1AxR2VqZz09*' 

data-pega-gadgetname ='PegaGadget' 

data-pega-action ='display' 

data-pega-action-param-harnessname ='pyCaseWorker' 

data-pega-action-param-classname ='Data-Portal' 

data-pega-action-param-model ='pyDefault' 

data-pega-action-param-readonly ='false' 

data-pega-isdeferloaded ='false' 

data-pega-applicationname ='ServiceRequest' 

data-pega-threadname ='TPapp' 

data-pega-resizetype ='stretch' 

data-pega-url ='http://localhost:8080/prweb/PRServlet/app/ServiceRequest/' 

data-pega-action-param-parameters ='{"pzSkinName":"pyEndUser","pyMashupSkeletonName":"pyDefaultMashupSkeleton"}' ></div>

<!-- ********************** End Pega content ********************** -->

Mashup code analysis:

• Mashup code contains an HTML script tag to access pega application and HTML code.
• HTML code defines the actions that mashup can perform.
• HTML code contains either IFRAME or DIV tags.
• IFRAME or DIV tags represent Pega Gadgets.
• Pega Gadget represents the application view.
• IFRAME and DIV tags contain a set of attributes and we can change the attribute values to change the behavior of the gadget (application view).

We can control the display size of the embedded pega application by changing the attribute 

(data-pega-resizetype) value inside the IFRAME or DIV tag.

data-pega-resizetype =' stretch'   - the application will expand to all the available space on the page.

data-pega-resizetype =' fixed'     - the application will fit the space defined for the mashup content.

The default value is 'stretch' when we generate the mashup code.

Copy the mashup code, embedded it into the web page. Embedded in www.pegahelp.com website.

Case creation through web mashup application.

We can verify the case in pega if it is created or not.

Will be posting more on IAC authentication for web mashup applications (Configuring Pega Web Mashup authentication) in the next articles. Stay tuned. Happy Learning.