This content has been archived.
Close popover

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.

Prerequisites

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:

  1. Open the case type for which you want to create a web mashup.
  2. 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

    Editing the mashup code URL

  3. Click Generate code. A dialog box displays the required Pega HTML.

    Generating mashup code

    Generating a mashup code

  4. Select and copy all of the code. Paste this code into your web page code.
  5. If you need to change the URL of the Pega Web Mashup, click Change Mashup URL. In the Generate mashup code dialog box that was previously displayed, you can edit the mashup URL.

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.

Moving the gadget <div> code to your web page

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">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Pega Web Mashup Page</title>
</head>
<body>
<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'
data-pega-action ='createNewWork'
data-pega-action-param-classname ='Org-Sample-Work-ClearInteractionResults'
data-pega-action-param-flowname ='pyStartCase'
data-pega-action-param-model =''
data-pega-isdeferloaded ='false'
data-pega-applicationname ='MyApplication'
data-pega-threadname ='STANDARD'
data-pega-systemid ='SLSV73c'
data-pega-resizetype ='stretch'
data-pega-url ='http://example.com/prweb'></div>
<!-- ********************** End Pega content ********************** -->
</body>
</html>

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.

  1. Click the Application menu, and click Definition.
  2. Click Integration & Security.
  3. At the bottom of the form, in the Mashup security section, add the URLs of the sites to which you added the mashup code.
  4. Save the form.

The Mashup security section on the Integration and Security tab

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.

Suggest Edit

84% found this useful


Related Content

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.