Styling a Pega Web Mashup

Pega applications exposed through a Web Mashup may need to reflect the styling used by the web site hosting the mashup. In Pega, your application style is configured through the use of a skin rule. If you need to style an application to match a company web site, you can apply the skin rule by configuring a portal for web mashup users using a portal skin (rather than an application skin). Use existing skin and styles from the host web application, or modify the skin rules associated with the portal rules for your mashup to create a new skin specifically for the mashup.

First, create a portal and assign the portal to the access group for web mashup users. A web mashup may be intended for unauthenticated users or customers who lack a Pega operator ID. In this situation, you can configure the access group created for mashup users to reference the portal.

Next, create a portal skin to configure the application styling for web mashup users (who interact with the application using the portal). Pega identifies the skin rule associated with the portal rule, as well as the HTML that streams back to the mashup, and uses the styles specified by the skin rule. The portal skin can inherit from the application skin, minimizing the customization needed for the web mashup.

To associate the skin to the portal used by the mashup, open the portal used by the mashup, select Other skin in the User interface section, and enter skin name you want to associate with your mashup. Edit the Harness class and name to match those associated with your mashup application and save your changes.