Parameter Widget Display by JS Condition

Version

Problem

Sometimes, you may want to display some of parameter widgets in use only when conditions are met, as shown in the following figure. Namely, only after you select an option from the previous-level drop-down box, the next-level drop-down box will be displayed.

Implementation Method

First, you need to control the required widget to be invisible or disabled, and then add an editing end event by JavaScript scripts as a condition to the widget so that the controlled widget can be visible or enabled.

API Description

setEnable(boolean): It is used to determine whether to enable a widget. The option includes true (enabled) and false (disabled).

setVisible(boolean): It is used to determine whether to visualize a widget. The option includes true (visible) and false (invisible).

For API details, see General API for Widgets.

Template Preparation

Download the original template Multi-Value.cpt.

The following figure shows the template parameter panel style.

In this template, use area as the condition widget and country as the controlled widget to illustrate the setting process.

For details about how to query multiple values in a dataset, see Multi-Value Query by Dataset Parameters.

Widget Hiding

You need to hide country/city-related widgets first. In this way, the area widget is grayed out on the parameter panel during report initialization.

1. Click the country drop-down box widget, choose Widget Setting > Attribute, and deselect Visible, as shown in the following figure.

2. Deselect Visible for the city drop-down box widget using the same method, as shown in the following figure.

3. Deselect Visible for the Country and City labels using the same method, as shown in the following figure.

Event Adding

1. Select the area drop-down box widget and add an After Editing event. In this way, the country widget and Country label are visible after you select a value in the area widget, which is implemented by JS, as shown in the following figure.

The following content shows the JavaScript codes.

var country = this.options.form.getWidgetByName("country");//Get the drop-down box widget country.
var area = this.options.form.getWidgetByName("area");//Get the drop-down box widget area.
var thislen = this.getValue().length;//Get the length in the value of the widget area.
//If the length has been set for the widget area, the widget country and label Country are visible. If not, they are invisible and “Select a region.” is displayed.
if(thislen) {
    country.setVisible(true);
    this.options.form.getWidgetByName("label3").setVisible(true);
} else {   
    country.setVisible(false);
    this.options.form.getWidgetByName("label3").setVisible(false);
    alert("Select a region.");
}

2. Add an After Editing event for the country widget using the same method, as shown in the following figure.

The following content shows the JavaScript codes.

var city = this.options.form.getWidgetByName("city");//Get the drop-down box widget city.
var country = this.options.form.getWidgetByName("country");//Get the drop-down box widget country.
var thislen = this.getValue().length;
//If the length has been set for the widget country, the widget city and label City are visible. If not, they are invisible and “Select a country.” is displayed.
if(thislen)
{
city.setVisible(true);
this.options.form.getWidgetByName("label5").setVisible(true);
}
else {
    city.setVisible(false);
    this.options.form.getWidgetByName("label5").setVisible(false);
    alert("Select a country.");
}

Effect Preview

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

Note:

The function is not supported on mobile terminals.

For details, you can download the completed template Parameter Widget Display by JS Condition.cpt.