Skip to main content

Creating a Pega Web Mashup

4 Tasks

15 mins

 Visible to: All users
Intermediate
Pega Platform 8.7
User Experience
English
Verify the version tags to ensure you are consuming the intended content or, complete the latest version.

Scenario

GoGoRoad is a roadside assistance application owned by Uplus Auto. GoGoRoad stakeholders want to give customers the ability to create a new assistance request from the company website to streamline operations for customer roadside assistance requests. Create a Pega Web Mashup and deploy the mashup on the Uplus Auto Website.

The following table provides the operator credentials you need to complete the challenge.

Role User name Password
Application Developer author@gogoroad pega123!
Note: Your practice environment may support the completion of multiple challenges. As a result, the configuration shown in the challenge walkthrough may not match your environment exactly.

You must initiate your own Pega instance to complete this Challenge.

Initialization may take up to 5 minutes so please be patient.

Challenge Walkthrough

Detailed Tasks

1 Create a self-service application

Note: As a Pega best practice, create an application on top of the core application so that any UI changes you make for the web mashup do not affect the core application UI.
  1. In the header of Dev Studio, click GoGoRoad > New Application to open the New application wizard.
    new application
  2. In the New application wizard, click the Search all types to select an application type.
    search all application types
  3. In the field, enter or select GoGoRoad and click Use this application type to use the current application.
    built on app
  4. Under Select case types, confirm that all case types are selected and click Continue.
    select all case types
  5. Under Select data types, confirm that all data types are selected and click Continue.
    select all data types
  6. Name the application GoGoSelf-Service.
    name your application
  7. Click Create application.
  8. Click Go to app.
  9. In Dev Studio, open the GoGoSelf-Service application definition.
  10. In the Built on applications section, under the GoGoRoad 01.01.01 application, add the Theme-Clarity 01.01 application to override Cosmos rules and cleanly display the assistance request form in a web self-service application.
  11. Click and drag the second row to move the Theme-Clarity application above the GoGoRoad application so that the GoGoSelf-Service application uses the skin from the Theme-Clarity application.
    app definition GoGoSelf-Service
    Tip: If you encounter a missing flow rule after creating the GoGoSelf-Service application, open the flow rule and save a copy into the new application using the Save As button.

2 Configure the application permissions

  1. In the GoGoSelf-Service application definition, click the Security tab.
  2. In the Mashup security section, click Add a row.
    Mashup security section of the ReserveIt application definition
  3. In the Trusted origin field, enter https://pegasystems.github.io/uplus-wss/ to allow your application to accept incoming messages from the host site.
  4. Save the application definition.

3 Create a mashup channel in App Studio

  1. In the navigation pane of App Studio, click Channels.
  2. Create a new Web mashup channel interface named Request for assistance.
    Create a web mashup channel interface
  3. Verify that Use encryption is enabled to ensure adherence to security best practices.
  4. In the Configuration section, in the Action list, confirm Create a new case is selected.
  5. In the Case type list, select Assistance Request.
  6. Enable the Retain mashup state on browser refresh option.
  7. In the Skin list, select Clarity Theme - Deep Cerise to give the mashup an out-of-the-box skin.
  8. In the Initial skeleton list, confirm Default Mashup Skeleton is selected.
  9. Click Generate mashup code to display the Mashup code window.
    Generate mashup code button
  10. In the Mashup code window, in the Mashup code section, click Copy and paste the code into a text file to reference the parameter values.
    mashup code on text file
  11. Close the Mashup code window, and then click Save to save the channel.

4 Deploy the mashup in the Uplus site

Note: The Uplus site allows users to enter mashup code attribute values in a user-friendly form to preview the mashup code without setting up a third-party site. If you have your own third-party site, you can add the site as a trusted origin and paste the entire mashup <div> code into the code of the host site to deploy the mashup on the external site.
  1. Click https://pegasystems.github.io/uplus-wss/ to access the Uplus site in your browser.
    uplus
  2. On the Uplus site, click Auto to open the Uplus Auto application.
    Uplus auto tile
  3. In the footer of the Uplus Auto site, click Settings.
    settings
  4. In the navigation pane on the left, click Quick Links to configure the mashup case on the Uplus Auto site.
    uplus settings menu
  5. Open the mashup code text file and complete the Mashup Case 1 form using the attribute values from the mashup code as shown in the following table.
    Attribute name in mashup code Form field Form value
    data-pega-threadname  Case name in 'en'  Request for assistance
    data-pega-action Action createNewWork
    data-pega-URL URL Note: This value is the URL of the instance you use to generate the mashup code.
    data-pega-action-param-classname  Classname GoGo-GoGoSelf-Work-AssistanceRequest
    data-pega-applicationname Application name GoGoSelf
    data-pega-channelID Channel ID Note: This value is a unique ID that is generated in the mashup code.
     
    Tip: The values in the form align with the attribute values in the mashup code that you created, as shown in the following image.
    using mashup parameters in the uplus form
  6. In the navigation pane on the left, click Users.
  7. On the User 1 form, in the Username and Pega userid fields, enter author@gogoroad.
  8. In the Password and Pega password fields, enter pega123!.
    User 1 form
  9. In the navigation pane on the left, click Save to save the settings.

Confirm your work

  1. In the header of Settings, click the Uplus Auto logo to return to the main Uplus Auto site.
  2. In the upper-right corner of the Uplus Auto site, click Log in and use the credentials that you entered in the User 1 form to Sign in.
  3. In the pane on the right, in the Quick links section, click Request for assistance.
    quick links request assistance
  4. Confirm that the site displays the Pega Web Mashup, in which you can create an Assistance Request case.
    final mashup
    Note: If you encounter an error message that third-party cookies must be enabled for Mashup to function, enable cookies in Dev Studio. Click Configure > System > Settings > Cross-Site Request Forgery, enable the Enable samesite cookie attribute option and select None from the Samesite options list. Click Submit.
  5. Advance the case to the Identify vehicle step.
  6. Refresh the browser and confirm that the mashup state is retained.

This Challenge is to practice what you learned in the following Module:

Available in the following mission:

Return to mission
If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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