Table of Contents

Pega web mashups for embedding Pega Platform UI in external web pages


Only available versions of this content are shown in the dropdown
Applicable to Theme Cosmos applications

You can choose parts of Pega Platform UI that are most suited to your business needs and make them available to users of your websites by creating a mashup. When you use mashups, you save development time and make your web application more engaging, varied, and functional.

Mashups are pieces of Pega Platform content or functionality that you can embed in a web page. The use of mashups does not require server-side integration. To create a mashup, you generate a mashup code in App Studio or Dev Studio, and then paste the code into the website source code.

A Pega web mashup embedded in an external web page
skeleton of an external web page with a Pega web mashup embedded in

You can create simple mashups that display small informational elements in harnesses, or complex flows that deliver most of the host-page functionality. For example, by embedding whole cases, you enable users to access case information, create new cases, and work with assignments.

Actions that you can define within mashups include:

Create a new case
Creates a new work object of a specified class and flow.
Display a page
Shows the harness specified by the harnessName and className parameters.
Get next work
Displays the work object of the highest priority in the worklist.
Open an assignment
Displays the specified assignment in the perform mode.
Open a case by ID
Displays the specified work object by work ID in the review mode.
Open a case by Handle
Displays the specified work object by work handle in the review mode.
Open a case by URL
Displays the harness returned by the custom activity specified in the action.

For relevant training materials, see the Pega Web Mashup module on Pega Academy.

  • Creating a mashup

    Enhance the functionality of your web application by embedding elements of Pega UI in your code. You can render whole cases so that users can create work and manage assignments. For example, you can embed a feedback form within your website so that the users who access the page can share their comments.

  • Mashup attributes

    Learn about the attributes, actions, and events that you can use in a mashup so that you can fully benefit from the functionality.

  • Mashup JavaScript page actions

    The host page JavaScript can perform actions inside a mashup with the doAction() function: pega.web.api.doAction(). This functionality provides you with the tools to meet your particular use case needs.

  • Mashup action objects

    If you want your mashup to perform custom actions, or if several mashups on your web page need to interact with one another, you configure mashup action objects inside the mashups. A mashup action object is defined as an object literal that is assigned to a JavaScript variable with the same name as the mashup.

  • Best practices for using mashups

    Embed Pega content on your website with less effort by following best practices for mashups. Building a guidelines-compliant application results in less issues and saves you time on troubleshooting and fixing errors.

  • Troubleshooting mashup issues

    Ensure that your mashups work as intended by learning about potential mashup issues and their resolutions.

Related Content


Did you find this content helpful?

Have a question? Get answers now.

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