Add A Button Control with Post Back Capability

How Can We Help?

< Back

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 activity 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 XMDesigner, 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

The in the caption of the MW10LoadButton adds an empty value into the Caption field of the control, allowing the control to be placed underneath other controls.

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);

}

Comments are closed.

This is the legacy version of the XMPro Documentation site. For the latest XMPro documentation, please visit documentation.xmpro.com

X