This content has been archived.

Creating a responsive Pega Web Mashup

Pega Web Mashup allows you to mashup Pega 7 Platform content within another web application, providing enhanced functionality and collaboration without requiring server-side integration. This content can include small informational elements or complex flows that deliver the majority of the host-page functionality.

The Pega 7 Platform supports the implementation of responsive user interface (UI) patterns that can re-flow based on the browser width. For example, a grid control can render as a traditional grid on a wide view, such as a desktop or tablet in landscape mode, or as a set of tiles on a smartphone or tablet in portrait mode.

To enable the Pega Web Mashup gadget to resize meaningfully and invoke the responsive behavior (such as switching between landscape and portrait mode on a mobile device), use the following instructions with any modifications as required for your specific implementation.

Responsive behavior is rendered when the effective width (in px or em of the actual iframe viewport) crosses defined breakpoints in the skin format.
  1. Add the following CSS selector to the containing page’s CSS to set the width proportionally to the width of the containing element. In this example, the Pega Web Mashup gadget is always 50% of the width of the current parent HTML item.
    Iframe {

    width:50% !important;


    Similarly, if you required the Pega Web Mashup gadget to take up 100% of the width, you would set it to 100%.

As a best practice, add the following line of code data-pega-event-onload ="window.scrollTo(0,0)" to the OnLoad event within the HTML div that contains the Pega Web Mashup gadget as shown in the example below.

<​div id="PegaContent" style="width:100%;"

data-pega-gadgetname ="PWGadgetB"
data-pega-action ="createNewWork"
data-pega-classname ="UServ-InsuranceProducts-AutoQuote"
data-pega-aparam-flowname ="pyStartCase"
data-pega-resizetype ="stretch"
data-pega-event-onload ="window.scrollTo(0,0)"
Using this code instructs the Pega 7 Platform content to be positioned at top-left after the content is loaded.
Suggest Edit

90% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.