Skip to main content

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.

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

The value of a DOM element

To use the value of an element from the page JavaScript as the value of a gadget attribute or action parameter, use [page/id/elementID], where elementID is the name of the DOM element. 

In the following image, click the + icons to learn more about using the value of a DOM element.

    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.

      Action Syntax Example
      getGadgetData

      pega.web.api.doAction("gadgetName", "getGadgetData", "[gadget/gadgetName/property]")

      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]")
      setGadgetData pega.web.api.doAction("gadgetName", "setGadgetData", "propertyReference", strValue) Set the value of the property .QuoteType with the setGadgetData action: pega.web.api.doAction("gadgetName", "setGadgetData", "pyWorkPage.QuoteType", "Auto")
      Caution: To reference a property in a Pega Platform application, such as .pyID, from a web page, the harness displayed by the gadget must include an input control that references the property.

      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.

      If you are having problems with your training, please review the Pega Academy Support FAQs.

      Did you find this content helpful?

      Want to help us improve this content?

      We'd prefer it if you saw us at our best.

      Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

      Close Deprecation Notice