Assigning Values to Parameter Widgets by JS

Version

Problem

On the parameter page, you often need to control the values of other widgets dynamically according to the value of one widget. For example, if you select a value for username, the value of state changes to 1 automatically. If no value is selected for username, the value of state changes to 2 automatically, as shown in the following figure.

Implementation Method

You can use the JavaScript script to obtain the required widget, thereby obtaining the value of the widget and assigning a value to the widget.

You can achieve the effect shown in the above figure with a simple example.

Template Preparation

1. Create a template, choose Template > Template Parameter, and add two template parameters, namely, username and state, as shown in the following figure.

2. Open the parameter panel, and click the Add All button on the right Widget Setting panel, as shown in the following figure.

3. Check that the widgets are added to the parameter panel automatically, as shown in the following figure of the parameter panel.

4. Set the two undefined widgets to Drop-down Box Widget and Radio Group Button Widget, respectively, as shown in the following figure.

5. Select the drop-down box widget username. To set Data Dictionary, set Type to Custom, set Actual Value and Display Value to jerny, anna, and merry, respectively, as shown in the following figure.

6. Select the radio group button widget state. To set Data Dictionary, set Type to Custom, set Actual Value and Display Value to 1 and 2, respectively. The following figure shows the effect.

Event Adding

Select the drop-down box widget username, and add an After Editing event, as shown in the following figure.

The JavaScript code is as follows.

var state = this.options.form.getWidgetByName("state");
var username = this.options.form.getWidgetByName("username").getValue();
if(!username) {
    state.setValue(2);
} else {
    state.setValue(1);
}

Note:

1. The code is used for setting a value for the parameter state. If the value of username is empty, !username is true. In this case, the value of state is set to 2. Otherwise, the value of state is set to 1 if a value exists for username.

2. For mobile terminals, you need to add the JavaScript code in section "Event Adding" to the After Editing event. To achieve the same effect on both PC and mobile terminals with one template, you can add both After Editing and After Exiting Edit events with the same JS code.

3. If you want to select multiple values from the drop-down box, you need to adjust the statement (used for assigning a value to username) to the array format. For example, you can use this.options.form.getWidgetByName('treeComboBox2') setValue([['02'],['05']]);.

Effect Preview

PC

Save the template and click Pagination Preview. The following figure shows the effect on the PC.

Mobile Terminal

The following figure shows the preview effect on the DataAnalyst app and the HTML5 terminal.

For details, you can download the template Assigning Values to Parameter Widgets by JS.cpt.