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.
- 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.
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)" </div>