Featured post

GetNextWork functionality in pega

What is GetNextWork in pega? Pega provided a functionality to get the most urgent assignment(task) for user to work on. This is configured o...

Pega Web Mashup

What is 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 host page (web application or web page) and host page can communicate to pega platform application. Pega web mashup code is a HTML-5 compliant. 
Pega web mashup icon

What are the actions can be defined in Mashup code?

When we embed a mashup code in any web application, user experience is same as Pega application experience. We can define below set of common actions in a mashup application. 
  • Create a new case
  • Get Next Work
  • Open an existing case
  • Displaying dashboard
  • Displaying work list
  • Performing an assignment
Scenario:
In this post we will see how we can embed a sample Pega Service Request application in a website (https://www.pegahelp.com/) and will try to create a case and see all other actions in embedded application.

Creating a Pega Web Mashup

In order to embed our pega application in a website, we need to generate a web mashup code in Pega and embed the HTML code in website in a 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 in 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 the details before generating the mashup code.
Name of the Mashup
Description
URL - It defaults to current pega plat form URL, we can change this as per our requirement to reference other system ( like QA or Production). Used local host 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 below screen for details we need to provide for each action.
Pega web mashup actions definition
Here, we are displaying a page (case worker 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 web mashup form click on "Generate mashup code" button. Pega will generate 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 HTML script tag to access pega application and HTML code.
  • HTML code defines the actions which mashup can perform.
  • HTML code contains either IFRAME or DIV tags.
  • IFRAME or DIV tags represents Pega Gadgets.
  • Pega Gadget represents application view.
  • IFRAME and DIV tags contains 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 IFRAME or DIV tag.
data-pega-resizetype ='stretch'   -  application will expand to all the available space on the page.
data-pega-resizetype ='fixed'     -  application will fit to the space defined for the mashup content.
Default value is 'stretch' when we generate the mashup code.

Copy the mashup code, embed 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 create or not.

case created in pega

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



2 comments:

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

    ReplyDelete