Tutorial: Creating a mashup with Pega Web Mashup
You can use Pega Web Mashup to create a mashup that embeds a Pega Platform application in another web application. You can create a simple mashup to display information in a harness or embed a case so that users can create work, get the next assignment, or open an assignment.
This tutorial demonstrates how to use Pega Web Mashup to add a mashup to a web page. The tutorial explains how to generate the mashup code, add that code to a web page, and configure a list of approved sites for the site origin.
The mashup process
When configuring a Pega Platform composite application with Pega Web Mashup, you use the following general process:
- Create the mashup code in Case Designer.
- Place the mashup code within the code of the host site. Paste the mashup <div> code into your web page.
- Configure the application permissions to allow your application to accept incoming requests from the host site.
Before you begin, familiarize yourself with the basic concepts of Pega Web Mashup. To work through this tutorial, you must have a Pega Platform application and a web server to test your host page on.
Generating the mashup code
To generate mashup code:
- Open the case type for which you want to create a web mashup.
- On the Settings tab, click Integration, and then click Generate mashup code. You can edit the URL that is displayed in a dialog box. The domains used for the mashup cannot be an IP number and cannot contain underscores.
Editing the mashup code URL
Generating a mashup code
. A dialog box displays the required Pega HTML.
- Select and copy all of the code. Paste this code into your web page code.
- If you need to change the URL of the Pega Web Mashup, click Generate mashup code dialog box that was previously displayed, you can edit the mashup URL. . In the
Some browsers limit Pega Web Mashup from setting cookies for cross-domain content in an iframe:
- Microsoft Internet Explorer does not set cookies when serving third-party content in an iframe. It allows only websites that send a P3P header to set the cookie.
- Apple Safari requires that a separate pop-up window open http://pegaAppDomain.abc/. You can apply a hotfix, available from Pegasystems Global Customer Support, to generate the pop-up window for the Safari browser.
- Pega Platform from version 7.2.2 and later provides the P3P header and opens the pop-up window by default. For earlier versions of Pega Platform, open the Dynamic System Setting Pega-UIEngine http/p3pheader to add the P3P header.
The next step when deploying a mashup is to insert the application by adding a <div> element to contain the mashup code Copy the code that you created in the Generate mashup code dialog box and paste it into your HTML. At run time, your web page includes the case.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Pega Web Mashup Page</title>
<p>This page will host a Pega Web Mashup</p>
<!-- ********************** Begin Pega content ********************** -->
<script src ='http://example.com/prweb?pyActivity=pzIncludeMashupScripts'></script>
<div data-pega-gadgetname ='PegaGadget'
<!-- ********************** End Pega content ********************** -->
For more information, see Configuring the Pega Gadget DIV Element for Pega Web Mashup.
Configure the application permissions
Because you are opening a channel between the host site and the Pega Platform application, you need to specify a list of trusted domains in the Pega Application rule. This list contains the URLs on which you are deploying the mashup. Be sure to include the site that you will be using to test the mashup.
- Click the Application menu, and click Definition.
- Click Integration & Security.
- At the bottom of the form, in the Mashup security section, add the URLs of the sites to which you added the mashup code.
- Save the form.
When you next load your host site, the application is displayed in an iframe. You can customize the appearance and behavior of the mashup by editing the attributes in the mashup code that you generated. You can make mashups responsive, fixed, or styled by using the skin rule.