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. 

Pega web mashup icon

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

Pega web mashup

Configure Web Mashup form

Pega 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.
Pega web mashup actions
When we select each action we need to provide information accordingly. See the below screen for details we need to provide for each action.
Pega web mashup actions definition
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.

webmashup into website



pega web mashup tutorial

Case creation through web mashup application.
case creation through web mashup

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

case created in pega

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



6 comments:

  1. Have used pega mashup in my last client engagement in pega 7.3.This was well documented .

    ReplyDelete
  2. Hi Team,
    Can you please provide more details on how we can use webmashup to exchange data between host application and pega.

    ReplyDelete
  3. Hi Pegahelp, Can you please advise how can we exchange data from host to mashup? I read PDN articles but they dint help.

    ReplyDelete
  4. Very useful sir.Please Upload a content on IAC Authenticaion for Mashup and Mashup security also.

    ReplyDelete
  5. can u post on service files , emails , file listeners.

    ReplyDelete