Data exchange through Pega Web Mashup

When you add a Pega Web Mashup to a web page, you can configure the mashup gadget to read data from the web page and send data to the hosting page or another mashup gadget. Passing data in this manner creates a more seamless experience for users.

For example, a bank with a dispute resolution process implemented on the Pega Platform™ has users who may want to dispute a recent transaction they see on the bank's website from a list of statement activity (stored in a system of record and accessed by the online banking web page). The transaction details are passed to the Pega Platform application through the mashup. The mashup returns a case ID to the user for future reference.

The Pega Web Mashup supports three options for passing data to or from a Pega Platform 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. Configure the action object as a script within the gadget DIV tag and specify the attributes and parameters as required to perform the action. For more information on configuring action objects, including the full set of actions available, see the Pega Community article Mashup page JavaScript actions.

Value returned by a function in the page JavaScript

To use the value returned by a function on the page JavaScript as the value of a mashup attribute or action parameter, use the syntax [page/function/token], where token is a string that has meaning to the function. Specify the function used to retrieve the value by using the data-pega-event-onpagedata attribute.

In the following image, click the + icons to learn more about using the value returned by a function in the page JavaScript.

Property reference in the page JavaScript

Use the getGadgetData 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, .pyWorkParty(operator).pyUserName. The getGadgetData action requires the keyword gadget.

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

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 syntax is the same syntax that you use in a property reference from the page JavaScript.

In the following image, click the + icons to learn more about using a property reference.

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 conversion, specify parameter name/value pairs using object literal notation.

For example, 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'}"

In the following image, click the + icons to learn more about using object literal notation.

Check your knowledge with the following interaction.