Creating cases from a web mashup

Manage the business processes of clients who use external software by embedding a case into their external web page in the form of a web mashup. For example, you can embed a case type for processing job applications on a web page that displays job offers. By generating mashup code in HTML and inserting it into an external web page or application, you enable users to interact with Pega content and create cases even without having access to Pega Platform software.
Before you begin: 
  • Create a case type that you want to insert into an external web page or application. For more information, see Case types.
  • Ensure that the Enable samesite cookies check box is clear.
  • To enable mashups when the Enable CSRF token check is selected, add the domains where the mashup scripts are embedded to the Allowed referrers field on the Cross-Site Request Forgery landing page. For more information, see Enabling and configuring Cross-Site Request Forgery settings.
  1. In the header of Dev Studio, click the name of the application, and then click Channels and interfaces.
  2. In the Create new channel interface section, click Web mashup.
  3. On the New Web mashup interface form, in the Basic options section, in the Name field, enter a name for the mashup that you want to use to create case types.
  4. Optional: To distinguish this channel interface from other Mashup channel interfaces, in the Description field, specify the purpose of this channel interface.
    For example: Enter Case type for processing job applications.
  5. In the autopopulated URL field, verify the URL for a Pega Platform instance.
  6. Optional: To generate the mashup snippet with URL encryption, turn on the Use encryption switch.
    Note: When the Use encryption switch is on, dynamic parameters are not supported.
  7. In the Configuration section, in the Action list, select Create a new case.
  8. In the Case type list, select a case type that you want to use.
  9. In the Flow name field, enter the case type starting process.
    Note: The starting process applies only to case types without the Create stage. For more information, see The Create stage.
  10. In the Thread name field, enter the name of the thread that handles the mashup.
  11. Optional: To load the mashup gadget as the last item on the page, turn on the Defer mashup load switch, and then initiate the mashup load process in the onload event of the host page.
  12. Optional: To retain the state of the case after the user refreshes the browser that displays the mashup, turn on the Retain mashup state on browser refresh switch.
    Note: Consider the following limitations when using this option:
    • The option to retain the case state is not backwards-compatible by default.
    • The option to retain the case state works only if the user loads the mashup gadget on the same thread, and the thread is available during a browser refresh. This means that this setting does not work if the user sets the thread name dynamically while loading the mashup.
    • The state is retained if the reload occurs in the same session.
    • The option to retain case state does not work for temporary work objects, for which the system does not generate work IDs.
  13. Optional: To validate dynamic parameters in the mashup request, turn on the Allow passing dynamic parameters switch.
  14. Configure the output options for the mashup:
    1. In the Skin list, select the skin rule that you want to use for the mashup.
    2. In the Iframe resizing list, select the resize mode for the mashup.
    3. In the Initial skeleton list, select the skeleton to provide a template for the mashup.
      Tip: You can check how the skeleton renders the content by clicking Skeleton preview.
  15. Optional: To add a parameter, for example a parameter for custom authentication, in the Custom parameters section, click the Add a row icon, and then enter a parameter name and value.
  16. In the What is a mashup section, click Generate mashup code, and then, in the Mashup code window, select the type of code that you want to copy:
    • To copy the iFrame code, above the iframe code window, click Copy.
    • To copy the mashup code, above the Mashup code window, click Copy.
    Note: Selecting the iframe code improves the response time of a mashup, but does not support passing dynamic parameters.
  17. Close the Mashup code window.
  18. Click Save.
  19. Optional: To preview how different devices display the mashup code, in App Studio, click Preview application, and then select the channel that you want to preview by clicking the channel name next to the application name.
What to do next: Paste the HTML code that you copy into a static web page or webview of an external web application to display your embedded case.
Note: To put multiple mashups on a single web page, include the mashup static script pzIncludeMashupScripts, in the HTML code only once.