Add A Button Control with Post Back Capability

Background

XMPro provides a variety of HTML controls but one of them is not a Button control. Button controls can be used effectively on forms to provide the user with a commonly used mechanism to initiate refreshing or reloading of data. For example, on a form, there can be various filter values that are set by the user. The user will then click on a button to initiate a postback mechanism so that the expected values are displayed on the form.

Steps

The steps below show how to add a working button that conforms to the site’s look and feel of an activityA specific step in a process.  It will be the user interface for that step (web form or a screen), for example, the Leave Application (screen interface or web form) will be the first Activity in the Leave Requisition process.  The Leave Application Authorization will be the second step or Activity in the Leave Requisition process.  One Process can have multiple activities. that will:

a. Set a value on the form that is used on the server to see what type of action is required.
b. Initiate a postback event.

Step 1:

Using the XMDesignerIs used to configure XMPro BPM solutions., add two controls as shown below:

a. Reference label – this control will contain the inline code that defines the button
b. Checkbox – it should not have any caption, and AutoPostBack property must be set to True

In the properties for Reference Label click on the Manage Code item. This will show the script editor for the control with two method outlines. In the ControlName_OnLoad () method place the code as shown below.

public void ReferenceLabel_OnLoad ()
{
activity.SetControlValue (“ReferenceLabel”, @” <div class = ‘buttonStyle buttonStyleDynamic dxbButton dxbButtonSys’ id=’__MW10LoadButton’
style=’cursor: pointer; width: 116px; height: 23px;’ >
<div class=’dxb’ id=’__ReferenceLabel_CD’ style=’padding-top: 2px; padding-bottom: 3px;’>
<div class=’dxb-hbc’>
<input class=’dxb-hb’ value=’Load’ type=’button’     />
</div><span class=’dx-vam’>Load</span>
</div>
</div>
” );
}

Replace the value ‘ReferenceLabel’ in the above code with the name of your Reference Label as shown below.

activity.SetControlValue(“MW10LoadButton”, @” <div class=’buttonStyle buttonStyleDynamic dxbButton dxbButtonSys’ id=’___MW10LoadButton’ style=’cursor: pointer; width: 116px; height: 23px;’ >
<div class=’dxb’ id=’___MW10LoadButton_CD’ style=’padding-top: 2px; padding-bottom: 3px;’>
<div class=’dxb-hbc’ >
<input class=’dxb-hb’ value=’Load’ type=’button’  />
</div><span class=’dx-vam’>Load</span>
</div>
</div>
“);

Step 2:

The next step is to create the following JavaScript code in a file that will be triggered when the user clicks on the button.

The comment sections (in green) describes the purpose. Place this file in the <website>\Scripts\Custom folder in the XMPro website.

In the properties of the activity in XMDesigner set the ‘ JavaScript File Name’ property to the name of the JavaScript file. See the sample below.

Step 3:

The final step is to decide where and when you will handle the logic if the button is selected. In the code sample below it is place in the OnRefresh method on the activity itself. A possible logic sequences is:

a. Check if the value of the Checkbox control is set to True. If True, then execute the code logic
b. Reset the value of the Checkbox to False. This is done to prevent any other AutoPostBack events from accidentally triggering the code again.

public void ActivityName_OnRefresh ()
{
//check to see if the Load button was clicked
if  (activity.GetControlValue<bool>(“MW1018Reload”))
{

//code to execute goes here

}

//reset the value of the checkbox
activity.SetControlValue (“MW10180Reload”, false);

}