Using the API to call events in a custom control requires markup that contains specific data- attributes to represent events and actions. When these data- attributes are used in a non-autogenerated control, the Pega 7 Platform routes actions and events through the same infrastructure as the autogenerated controls.

Action attributes follow a specific pattern where the data- is followed by the user's interaction. For example, data-esc-key describes an action triggered by pressing the ESC key and data-focus describes an action triggered by the control coming into focus. The data-ctl attribute is required since it identifies the control type. In the case of custom controls this should be set to data-ctl=”non-auto”.

For example, the following custom button has a set value action:

<button name="CollectCustomerDetails_pyWorkPage_7" data-ctl="non-auto" type="button" data-click='[["setValue", ["pyWorkPage.ContactInformation.Name" ,"","","","User name"]]]' class="Simple pzhc pzbutton">Update contact name</button>

The preceding example has the following data- attributes:

• data-ctl: identifies the control type
• data-click: identifies the click event associated with the button

In the example, the action is configured to do a setValue. The value of data-click is configured on the Actions tab of the control's property panel.

The data-ctl attribute is required to identify the control in the event infrastructure. For a custom control, the attribute is: data-ctl = 'non-auto'. The second element in the example represents the parameter values configured for the action.

Multiple event actions

If actions correspond to multiple events, the markup requires all the corresponding data- event attributes. For example, the onChange-postValue and onHover-showSmarTtip for a text input:

<input data-ctl="non-auto" id="P1" type="text" name="$PpyWorkPage$pP1" class="leftJustifyStyle" data-change='[["postValue",[":event"]]]' data-hover='[["showSmartTip",[":event","","Please enter your name here"]]]'>

This example has the following data- attributes:

• data-ctl: identifies the control type
• data-change: identifies the input change event
• data-hover: identifies the hover over event

The example also includes these events:

• postValue: posts the value of the field to the clipboard
• showSmartTip: displays smart tip when the control is hovered over

If there are multiple actions for the same event on a control, the data- event attribute includes an array of actions:

<button name="CollectCustomerDetails_pyWorkPage_7" data-ctl="non-auto" type="button" data-click='[["setValue", ["pyWorkPage.ContactInformation.Name" ,"","","","User name"]],["refresh", ["thisSection", "","","","","","","", "","pyWorkPage"]]]' class="Simple pzhc pzbutton">Update contact name</button>

If the markup of your custom control generates these attributes, the Pega UI engine processes these actions by using the same event infrastructure as autogenerated controls. The engine handles the event sequencing and waits for the server response on the first action before processing the second action, if necessary.

Through this method, action markup can be generated in custom controls for all actions (those supported for autogenerated controls through configuration). To find the exact parameters for corresponding actions, configure the same action on an autogenerated control and view the markup through a browser's developer tools.

Supported data- control attributes

The following data- attributes are supported in autogenerated and custom non-autogenerated controls:

• data-click
• data-double-click
• data-hover
• data-right-click
• data-enter-key
• data-up-key
• data-down-key
• data-left-key
• data-right-key
• data-esc-key
• data-tab-key
• data-any-key
• data-change
• data-focus