Skip to main content

Creating a Pega Web Mashup


3 Tasks

15 mins

Visible to: All users
Intermediate Pega Platform 8.5 User Experience English
This content is now archived and is no longer updated. Progress is not calculated. Pega Cloud instances are disabled, and badges are no longer awarded. Click here to continue your progress in the latest version.


ReserveIt is an online marketplace, owned by ABB Corp., that lets people rent out homes or apartments to guests. Customers can browse the listings to request a rental. The application manages the reservation process, including any exchanges between the owner and prospective renters.

ReserveIt stakeholders want to give users the ability to create new Booking cases from the company website. Create a Pega Web Mashup and deploy the mashup on the ABB Corp. website.

Note: For security reasons, a challenge environment is not available. If you are interested in performing the challenge steps, you need a valid host site, and you can leverage an environment from a different challenge.

Challenge Walkthrough

Detailed Tasks

1 Create a mashup channel in App Studio

  1. In the App Studio navigation pane, click Channels.
  2. Create a new Web mashup channel interface named Create booking.
    Create a web mashup channel interface
  3. Ensure that Use encryption is enabled to ensure adherence to security best practices.
  4. In the Action list, select Create a new case.
  5. In the Case type list, select Booking.
  6. Enable the Retain mashup state on browser refresh option.
  7. In the Skin list, ensure that ReserveIt-Cosmos is selected to reuse the application UI.
  8. Click Generate mashup code to display the Mashup code window.
    Generate mashup code button
  9. In the Mashup code window, in the Mashup code section under the iframe code, click Copy.
    Mashup code window
  10. Close the window, and then click Save.
  11. Paste the mashup <div> code into the code of the host site to deploy the mashup on an external site.

2 Configure the application permissions

  1. In Dev Studio, click ReserveIt > Definition.
  2. Click the Integration & security tab.
  3. In the Mashup security section, click Add a row.
    Mashup security section of the ReserveIt application definition
  4. In the Trusted origin field, enter the URL of the host site to allow your application to accept incoming messages from the host site.
  5. Click Save.

3 Confirm your work

  1. Launch the host site.
  2. Confirm that the site displays the Pega Web Mashup, where you can create a Booking case.
    ReserveIt web mashup confirmation with Booking case
  3. Refresh the browser and confirm the mashup state is retained.

Available in the following mission:

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice