and setGadgetData actions to read and set property values in a mashup gadget.

The getGadgetData action

uses the syntax [gadget/gadgetName/property] to reference the property reference where gadgetName is
the name of the mashup, and property is the name of a property used in a Pega application such as .pyID,
pyWorkPage.pyID, or .pyWorkParty(operator).pyUserName. gadget is a keyword required by the
getGadgetData action.

For example, to display the value of the pyID property on the host page, use the doAction function to call
the getGadgetData action with the syntax pega.web.api.doAction("gadgetName", "getGadgetData",
"[gadget/gadgetName/.pyID]"). To set the value of a property using setGadgetData action, use the syntax
pega.web.api.doAction ("gadgetName", "setGadgetData", "propertyReference", strValue).

For example, set the value of the property .QuoteType with the setGadgetData action:
pega.web.api.doAction("gadgetName", "setGadgetData", ".QuoteType", "Auto").

Important: To reference a property in a Pega Platform application, such as .pyID, from a web page, the
harness displayed by the gadget must include a Data Field control that references the property.

Use a property reference as the value of a gadget attribute or parameter

To perform an action on a gadget using data from the gadget, create an action object for the gadget. If the
property you need to use is in the same gadget as the reference, use the syntax Attribute/parameter =
[propertyReference]. For example, when configuring an action object to display a confirmation page that
uses operator information as parameter values, set the value of the pageURL attribute using the syntax
pageURL: "/statusPage" + "CreateOper=[.pxCreateOpName]&..., where CreateOper is the name of the
parameter and pxCreateOpName is the reference to the property in the Pega application.

If the property you need to use is in a different mashup gadget, use the syntax
[gadget/gadgetName/propertyReference] to identify the gadget containing the property. This is the
same syntax that you use in a property reference from the page JavaScript.

Use object literal notation to preserve attribute and parameter names

Many system properties and parameters have names with mixed cases. When displaying a non-XHTML
page, the Firefox browser converts attribute names to all lowercase letters. To prevent this, specify
parameter name/value pairs using object literal notation.
The following two examples demonstrate the use of object literal notation:
• To set the value of the data-pega-parameters attribute on the mashup definition using object
literal notation: data-pega-parameters="{Customer:'[page/id/Account]', Level:'gold'}"

• To set the parameter object for a gadget action object using object literal notation: params: {
Status:"[pyWorkPage.pyStatusWork]"}

How to style a Pega Web Mashup

Pega applications exposed through a web mashup may need to reflect the styling used by the website 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 website, 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 7 identifies the skin rule associated with the portal rule, as well as the HTML