How To Exchanging Data Through Pega Web Mashup – Pega 8

When you add a Pega Web Mashup to a web page, you can configure the mashup gadget to read data from and send data to the hosting page or another mashup gadget. “Exchanging Data Web Mashup”

Passing data in this manner creates a more seamless experience for users.

The Pega Web Mashup supports threee options for passing data to or from a Pega application:

• Use the data-pega-event-onpagedata attribute to specify the default value for the gadget.
• Use the Javascript function doAction() to set or read data values from the web page hosting the gadget, such as by clicking a button. Call the doAction() function using the syntax: pega.web.api.doAction([gadgetname],[action],[parameters]).
• Use an action object to perform additional actions on a web mashup gadget or configure the gadget to interact with another gadget.

Pega Web Mashup attribute reference:

The values of mashup attributes and action-specific parameters can be literal values, property references, references to functions in the page JavaScript, or references to input elements in the page JavaScript (DOM elements).

Additionally, a parameter object containing name/value pairs for custom parameters is used as input for many actions.

When you specify nonliteral values as attribute or parameter values, use the syntax in the following table.

value of DOM element	[page/id/elementID]
Value returned by a function in the page JavaScript	[page/function/token]
Property reference in the page JavaScript	[gadget/gadgetName/property]
Property reference as the value of a gadget attribute or parameter	Attribute/parameter = [propertyReference] or [gadget/gadgetName/propertyReference]

• Ex: data-pega-parameters=”{Customer: ‘[page\id\Account]’}”
• Ex: data-pega-classname = [page/function/AutoClaim]

Use a property reference in the page JavaScript:

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

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]”).

Example to set the value of the property with setGadgetData action.

• pega.web.api.doAction(“gadgetName”, “setGadgetData”, “.QuoteType”, “Auto”).

Use object literal notation to preserve attribute and parameter names:

When displaying a non-XHTML page, the Firefox browser converts attribute names to all lowercase letter. 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]”}

Hope you learned about How To Exchanging Data Through Pega Web Mashup – Pega 8