This content has been archived.

Pega Web Mashup attribute reference

This article provides definitions of all the properties, attributes, actions, and events provided by the Pega Web Mashup and includes code samples for most of them.

Following is a simplified representation of the architecture of a page that hosts Pega gadgets:

<head>
<script src ='http:/&nbsp;example.com/prweb?pyActivity=pzIncludeMashupScripts'>
</script>
</head>
<html>
<body>
[page JavaScript actions]
<div data-pega-gadgetname = "GadgetName" [mashup attributes
default gadget actions
mashup events] >
<script>
var data-pega-gadgetname = {
[mashup action object that handles gadget-to-gadget interaction]
}
</script>
</div>
</body>
</html>

See the Data binding syntax article for examples of the syntax to use when you need to use anything other than a literal value as the value of an attribute or parameter.

Contents

Configuration Object Attributes (pega.web.config)

Mashup attributes

data-pega-systemid, data-pega-applicationname, and data-pega-threadname
data-pega-action-param-parameters

Action-specific attributes

data-pega-isdeferloaded (optional)
data-pega-resizetype (optional)
data-pega-targettype
data-pega-popupoptions

​Gadget attributes for events

data-pega-event-onload
data-pega-event-onbeforeload
data-pega-event-onconfirm
data-pega-event-onclose
data-pega-event-oncustom
data-pega-event-onpagedata
data-pega-event-onresize

Configuration object attributes (pega.web.config)

You specify the following configuration settings with configuration object attributes:

  • pega.web.config.systemID: A system ID, which is a string that identifies a logical host name of the system hosting the application to be displayed.
  • pega.web.config.appName: The name of a Rule-Application that specifies a single work pool.

Additionally, you can specify the following optional attributes:

  • pega.web.config.thread: Thread ID.
  • pega.web.config.encrypt: True or false.

    Setting the property pega.web.config.encrypt to false disables all encryption and obfuscation for this script. This setting is useful when testing Pega Web Mashup deployments or when using Pega Web Mashup in a secure intranet deployment.

For example:

<HTML>
<HEAD>
<script src="https://community.pega.com/%26nbsp%3Bexample.com/prweb?pyActivity=pzIncludeMashupScripts">
</script>
<script>
pega.web.config.systemID = "PRPC1";
pega.web.config.appName = "AutoClaim";
</script>
</HEAD>

Mashup attributes

A Pega gadget is defined in a DIV and has the following attributes, which are described in this section:

Action-specific attributes

data-pega-gadgetname

Specifies a string that names the gadget. For example:

 

<div id="PegaGadgetDIV" data-pega-gadgetname = "PegaSampleTask"…>

 

data-pega-systemid, data-pega-applicationname, data-pega-threadname

If all of the Pega gadgets on your Web page display processes from the same application running on the same system, set the configuration properties in the configuration object at the top of the page.

If there is more than one gadget, you must set one or more of the configuration properties with gadget attributes:

  • If they all use the same system and application name, you can set the systemID and appName in the configuration object. Then, optionally specify a unique Thread name in the gadget definition with the data-pega-threadname attribute.
  • If they use the same system but different applications, set the application name and thread name in the gadget definition with the data-pega-applicationname and data-pega-threadname gadget attributes.
If there is more than one Pega gadget on your Web page and they need to share the same Clipboard pages, use the same thread name for each. If each gadget needs its own Clipboard context, you must provide separate thread names for each one with the data-pega-threadname gadget attribute, so their pages are maintained separately.

For example:

<HTML>

<HEAD>

<script src="https://community.pega.com/%26nbsp%3Bexample.com/prweb?pyActivity=pzIncludeMashupScripts">

</script>

</HEAD>

<BODY>

<div id="PegaGadgetDIV" style="overflow:auto"

data-pega-gadgetname = "PegaSampleTask"

data-pega-applicationname= "PegaSample"

data-pega-systemid= "PRPC1"

data-pega-action-param-parameters = "display"

data-pega-action-param-classname = "PegaSample-Task"

data-pega-action-param-harnessname = "New"

>

</div>

</BODY>

</HTML>

data-pega-action-param-parameters

Specifies the default or main action that the Gadget Manager executes when it loads the gadget.

Values

Name Description
display Default value. Displays the harness, flow, or other item identified with the action-specific attributes defined below. Analogous to the Show-HTML activity method.
logoff Logs off all servers accessed in the session.
openAssignment Opens the assignment specified by the data-pega-action-param-key attribute, defined below.
createNewWork Creates a work object using the flow specified by the data-pega-action-param-flowname attribute, described below.
openWorkItem Opens the work object specified with the data-pega-workid attribute.
openWorkByHandle Opens the work object specified by the data-pega-action-param-key attribute, defined below.
openWorkByURL Opens the work object by using a URL.
getNextWork Retrieves the next work item from the user’s worklist.

Default

If you do not specify a value for data-pega-action-param-parameters, the load action is assumed to be display.

Example

<div id="PegaGadgetA" style="overflow:auto;"

data-pega-gadgetname="GadgetA"

data-pega-threadname = "NewWork"

data-pega-action-param-parameters = "createNewWork"

data-pega-action-param-classname = "PegaSample-CustomerRequest"

data-pega-action-param-flowname = "NewWork"

>

</div>

Action-specific attributes

Depending on the value of the data-pega-action-param-parameters attribute, you provide values for the following action-specific attributes:

Name Description
data-pega-action-param-classname When the action is display, createNewWork, or getNextWork, the applies to class of the specified flow or harness.
data-pega-action-param-model When there is a className specified, the name of a model to use when creating a page for that class.
data-pega-action-param-flowname When the action is display or createNewWork, the name of a flow rule.
data-pega-action-param-harnessname When the action is display, the name of a harness rule.
data-pega-action-param-pagename The name of an existing clipboard page.
data-pega-action-param-query When the action is openWorkByURL, the query string used to open the work item.
data-pega-action-param-isreadonly By default, the assignment, work object, or flow displayed can be edited. Set this attribute to true if the contents displayed in the gadget should be read-only.
data-pega-action-param-key When the action is openAssignment or openWorkByHandle, the pzInsKey of the object.
data-pega-action-param-workid When the action is openWorkItem, the work object ID of a work item.
data-pega-action-param-parameters An object for passing in user-defined parameters. Use object literal notation:
data-pega-action-param-parameters= "{name: 'value',name: 'value'}" Using data-pega-action-param-parameters in this way preserves the case of mixed-case strings even when the operator is using a Firefox browser.

Example:

<div id="PegaGadgetDIV" style="overflow:auto;"

data-pega-gadgetname = "PegaSampleTask"

data-pega-action-param-parameters = "display"

data-pega-action-param-classname = "PegaSample-Task"

data-pega-action-param-harnessname = "New">

</div>

data-pega-isdeferloaded

Optional. Specifies whether the default action specified (data-pega-action-param-parameters="getNextWork", for example) occurs when the Gadget Manager first loads the page, or whether the action should wait until it is invoked through a doaction by the page JavaScript or a gadget action in another gadget.

Values

True, false

Default value
False

Example

​<div id="PegaWebGadgetB" style="display:none;" data-pega-gadgetname="PWGadgetB" data-pega-isdeferloaded="true" > </div>

data-pega-resizetype

Optional. Specifies the sizing behavior of the gadget: whether it must fit into a fixed space, or whether it can expand to fill the available space on the page.

Values

Stretch, fixed

Default value

Stretch

Notes
When you accept the default value of stretch, you should set the style of the DIV to "overflow:auto" to ensure that the gadget’s display is not clipped. By default, the value of this attribute is stretch. You do not need to modify this attribute unless you want to set a fixed size. Do not set other sizing attributes when the value of data-pega-resizetype is stretch.

Example

​<div id="PegaContent" style="overflow:auto; width:800; height:440; display:none;" data-pega-gadgetname="PWGadgetB" data-pega-action-param-parameters = "createNewWork" data-pega-action-param-classname = "UServ-InsuranceProducts-SimpleCollision" data-pega-action-param-flowname = "ProcessVehicleApplication" data-pega-isdeferloaded = "true" data-pega-resizetype = "fixed"> </div>

data-pega-targettype

Specifies where the gadget should display its contents: On the composite page or in a pop-up window.

Values

_self, _popup

Default value

_self

Example

<div id= "PegaGadget1"

data-pega-gadgetname="GadgetPopup"

data-pega-targettype="_popup"

data-pega-popupoptions="height=200; width=400; toolbar=no; menubar=no;"

data-pega-threadname = "Thread1"

data-pega-action-param-parameters="createNewWork"

data-pega-action-param-classname="PegaSample-Task"

data-pega-action-param-flowname="basicProcess"

data-pega-isdeferloaded="true"

>

</div>

data-pega-popupoptions

If data-pega-targettype="_popup", this attribute specifies attribute values for the popup window.

Value

A string with name/value pairs for popup attributes.

Example

<div id= "PegaGadget1"

data-pega-gadgetname="GadgetPopup"

data-pega-targettype="_popup"

data-pega-popupoptions="height=200; width=400; toolbar=no; menubar=no;"

data-pega-threadname = "Thread1"

data-pega-action-param-parameters="createNewWork"

data-pega-action-param-classname="PegaSample-Task"

data-pega-action-param-flowname="basicProcess"

data-pega-isdeferloaded="true"

>

</div>

Gadget attributes for events

The Gadget Manager supports events with the following gadget event attributes:

In all cases, the name of the gadget is passed to the function called by the gadget event attribute.

data-pega-event-onload

The name of a JavaScript function defined in the page JavaScript that the Gadget Manager invokes when it loads the gadget.

Value

The function reference – a string that identifies the function defined on the page.

Example

<script>

function onLoadFunc(sID) {

PegaWebGadgetB.style.display = "block";

return true;

}

</script>

<div id="PegaGadgetA"

data-pega-gadgetname="GadgetA"

data-pega-threadname = "ThreadA"

data-pega-applicationname = "AutoClaim"

data-pega-action-param-parameters = "display"

data-pega-action-param-harnessname = "PegaWebAssignList"

data-pega-action-param-classname = "Assign-Worklist"

data-pega-event-onload = "onLoadFunc"

>

</div>

data-pega-event-onbeforeload

The name of a JavaScript function defined in the page JavaScript that the Gadget Manager invokes before it loads the gadget. The function is expected to return a value of true or false. If it returns a value of false, the Gadget Manager does not load the gadget.

Value

The function reference – a string that identifies the function defined on the page.

Example

<script>

function onBeforeLoadFunc(pID) {

if(typeof(UserName) == 'undefined') {

alert("Missing UserName input field");

return false;

}

else

return true;

}

</script>

<div id="PegaGadgetA" style="overflow:auto;"

data-pega-gadgetname="GadgetA"

data-pega-action-param-parameters = "display"

data-pega-action-param-harnessname = "PegaWebAssignList"

data-pega-action-param-classname = "Assign-Worklist"

data-pega-event-onbeforeload = "onBeforeLoadFunc"

>

</div>

data-pega-event-onconfirm

The name of a JavaScript function defined in the page JavaScript that the Gadget Manager invokes when the gadget displays a Confirm harness.

Value

The function reference – a string that identifies the function defined on the page.

Example

<script>

function onConfirmFunc(pID) {

var pOp = pega.web.api.doAction(GadgetA, "getGadgetData", ".pxCreateOpName");

var pOrg = pega.web.api.doAction(GadgetA, "getGadgetData", ".pyOrigOrg");

var pDiv = pega.web.api.doAction(GadgetA, "getGadgetData", ".pyOrigDivision");

var pUnit = pega.web.api.doAction(GadgetA, "getGadgetData", ".pyOrigOrgUnit");

var pPosition = pega.web.api.doAction(GadgetA, "getGadgetData", ".pyWorkParty(Originator).pyPosition");

alert("operator: " + pOp + ", organization: " + pOrg + ", division: " + pDiv + ", unit: " + pUnit + ", position: " + pPosition);

return true;

}

</script>

<div id="PegaGadgetA"

data-pega-gadgetname="GadgetA"

data-pega-applicationname = "AutoClaim"

data-pega-threadname="ThreadA"

data-pega-action-param-parameters = "display"

data-pega-action-param-harnessname = "PegaWebAssignList"

data-pega-action-param-classname = "Assign-Worklist"

data-pega-event-onconfirm = "onConfirmFunc"

>

</div>

data-pega-event-onclose

The name of a JavaScript function defined in the page JavaScript that the Gadget Manager invokes when the gadget closes a harness.

Value

The function reference – a string that identifies the function defined on the page.

Example

<script>

function onCloseFunc(pID) {

pega.web.api.doAction("GadgetA", "refresh");

return true;

}

</script>

<div id="PegaGadgetA"

data-pega-gadgetname="GadgetA"

data-pega-threadname="ThreadA"

data-pega-applicationname = "AutoClaim"

data-pega-action-param-parameters = "display"

data-pega-action-param-harnessname = "PegaWebAssignList"

data-pega-action-param-classname = "Assign-Worklist"

data-pega-event-onclose = "onCloseFunc"

>

</div>

data-pega-event-onpagedata

The name of a JavaScript function defined in the page JavaScript that the Gadget Manager calls to retrieve data from the page.

Value

The function reference – a string that identifies the function defined on the page.

Example

<script>

function dataFromPage(test){

if(test == "className")

return "pegaSample-Task";

}

</script>

<div id="PegaGadgetA"

style="overflow:auto"

data-pega-gadgetname = "PWGadgetA"

data-pega-threadname = "Thread1"

data-pega-applicationname = "AutoClaim"

data-pega-action-param-parameters = "createNewWork"

data-pega-action-param-classname = [page/function/className]

data-pega-action-param-flowname = "BasicProcess"

data-pega-event-onpagedata = "dataFromPage"

>

</div>

For information about the syntax used with the data-pega-action-param-classname attribute in the example, see Data binding syntax.

data-pega-event-oncustom

The name of a JavaScript function defined in the page JavaScript that is called in response to a custom event generated by page content. The event is generated by harness content using pega.desktop.gadgetCustomEvent(string).

Example

<script>

function customCallback(gadgetName, strToken){

if( gadgetName == "PWGadgetA") {

nbsp; alert(strToken)

}

</script>

<div id="PegaGadgetA"

style="overflow:auto"

data-pega-gadgetname = "PWGadgetA"

data-pega-threadname = "Thread1"

data-pega-applicationname= "AutoClaim"

data-pega-action-param-parameters = "createNewWork"

data-pega-action-param-classname = [page/function/className]

data-pega-action-param-flowname = "BasicProcess"

data-pega-event-oncustom = "customCallback"

</div>

The token is a string value defined by the developer. For example, the string can contain a property name and value pairs delimited by characters. The JavaScript function is responsible for parsing and processing the token.

Since this is a Javascript function reference, there is no default value when used as a DIV attribute. This action is not allowed in the actionMapping setting.

data-pega-event-onresize

The name of a JavaScript function that is defined in the page JavaScript and invoked when the gadget resizes. To use this event, the data-pega-event-onresize attribute in the gadget DIV element must be set to stretch.

Value

The function reference – a string that identifies the function defined on the page.

Example

<script>
function onResizeFunc()
alert("Gadget is resized");
}
</script>
<div id="PegaGadgetA"
style="overflow:auto;"
data-pega-gadgetname = "GadgetA"
data-pega-resizetype = "stretch"
data-pega-action-param-parameters = "display"
data-pega-action-param-harnessname = "PegaWebAssignList"
data-pega-action-param-classname = "Assign-Worklist"
data-pega-event-onresize = "onResizeFunc"
>
</div>

 


90% found this useful


Related Content

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.