Configuring the Mashup channel

Configure the Mashup channel in your application to embed Pega Platform content in an external application, for example, to create new work for a case type or to display a harness. Mashup code is generated as HTML that you can copy, paste, and view within a page or view of an external application. You can also test how the mashup code that you generate looks in a mobile app, or preview a channel to verify that mashup code displays correctly on different types of devices.
  1. In Dev Studio, click the name of your application, and then click Channels and interfaces.
  2. In the Create new channel interface section, click Mashup.
  3. In the Name field, enter a name for the Mashup channel interface.
  4. Optional: To distinguish this channel interface from other Mashup channel interfaces, in the Description field, specify the purpose of this channel interface.
  5. Define the Pega Platforminstance:
    1. In the URL field, enter the URL for a Pega Platform instance.
      http://sample.pega.com:8080/prweb/
    2. Optional: To generate the mashup snippet with URL encryption, select the Encrypt check box.
  6. In the Configuration section, define the action that is executed by the mashup code:
    1. From the Action list, select a Pega Platform action, and then enter additional details for the selected action.
    2. In the Thread name field, enter the name of the thread that handles the mashup.
    3. In the Resize type list, select the resize mode for the mashup gadget.
    4. Optional: To load the mashup gadget as the last item on the page, select the Is defer loaded check box.
    5. Optional: To use a skin for the selected action, in the Skin name field, press the Down Arrow key and select a skin name.
    6. Optional: To add an action parameter, in the Action parameters section, click the Add a row icon, and then enter a parameter name and value.
  7. In the Mashup code section, click Generate.
  8. Optional: Test your cases for the Pega Platform application in a demo mashup mobile app:
    1. In the Mashup code section, click Try Mobile Mashup.
    2. Download and install the Pega Mashup Preview mobile app from the Apple App Store or Google Play.
    3. Open the mobile app and connect with the Pega Platform instance:
      • Scan the displayed QR code.
      • Enter the URL that you entered in the URL field and enter the credentials manually.
    4. Click the Mashups tab.
    5. For the Create new work action, verify that you can create new work by clicking the case name that you specified, and then checking the app branding.
  9. Optional: Verify that different types of devices correctly display the mashup code.
    The preview functionality uses a wrapper that functions as a portal for displaying a frame with the mashup code. You modify the appearance of the default wrapper by editing the HTML and CSS settings in pyMashupComposerPreviewHTML and py-preview-mashup-styles rules, and control the appearance of the mashup code by editing a styling rule that is defined in the Skin name field.
  10. Copy the HTML code from the Mashup code text area by clicking Copy to clipboard.
  11. Click Save.