Creating responsive mashups using Pega Web Mashup
Pega Web Mashup, known as the Internet Application Composer (IAC) in Pega 7.1.8 and earlier versions, allows you to mashup Pega 7 Platform content within another application's web page, providing enhanced functionality and collaboration without requiring server-side integration. This content includes small informational elements to complex flows that deliver the majority of the host-page functionality.
Support in the Pega 7 Platform
The Pega 7 Platform supports the implementation of responsive user interface (UI) patterns that can be instructed to re-flow based on the width of the browser's viewport. For example, a grid control can render as a traditional grid on a wide viewport, such as a desktop or tablet in landscape mode, or as a set of tiles on a smartphone or tablet in portrait mode.
Currently, Pega Web Mashup does not easily support Pega 7 Platform responsive capabilities. An embedded Pega Web Mashup control maintains the same configured width at runtime, meaning that as the host page resizes, the Pega Web Mashup control remains fixed.
Using Pega Web Mashup
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.
- 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 (highlighted in bold below) to the OnLoad event within the HTML div that contains the Pega Web Mashup gadget.
<div id="PegaContent" style="width:100%;"
PegaA = "createNewWork"
PegaA_className = "UServ-InsuranceProducts-AutoQuote"
PegaA_flowName = "pyStartCase"
PegaResize = "stretch"
<strong>PegaE_OnLoad = "window.scrollTo(0,0)"</strong>>
Using this code instructs the Pega 7 Platform content to be positioned at top-left after the content is loaded.
Published November 10, 2014 — Updated September 1, 2015