Pega web mashups for embedding Pega Platform UI in external web pages
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.
![skeleton of an external web page with a Pega web mashup embedded in it](https://docs-previous.pega.com/sites/default/files/drupal/dita/out/3411/platform-helpsystem/Resources/Images/UI/Mashup-skeleton-view.png)
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.
- Authentication in mashups
Authentication ensures that only users and systems with a verified identity use the mashup and that all permitted manipulations of the data occur under the current user identity.
- 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.
Previous topic Development of web self-service interface Next topic Creating a mashup