JS Control whether the Parameter Widget is Displayed

1.1 Requirement

How to have some widgets displayed only when certain conditions are met? See the effect as shown below:

Only when an option is picked in the previous drop-down box, the next drop-down box will be displayed:

1.2 Solution

Set the widget/widgets to be displayed subsequently [Not Visible] or [Not Enabled], then add an After Editing event to the first widget, and finally use JavaScript to make the widget/widgets to be displayed subsequently [Visible] or [Enabled].

2.1 Initialize the widget to Not Visible

1) Select Project_name, click [Properties]-[Basic], and uncheck [Visible], as shown below:

2) Set the Year widget Not Visible:

3) Set the Label widgets Project_name and Year Not Visible.

2.2 Add events to widgets

1) Select Asset_category, add an After Editing event, and set Project_name Visible using JavaScript:

Input the following JavaScript codes:

var Project_name = this.options.form.getWidgetByName("Project_name");
var thislen = this.getValue().length;
if(thislen) { // If any option of Project_category is picked, set Project_name and the Label widget Visible
    Project_name.setVisible(true);
    this.options.form.getWidgetByName("label3").setVisible(true);
} else { // If no option of Project_category is picked, set Project_name and the Label widget Not Visible
    Project_name.setVisible(false);
    this.options.form.getWidgetByName("label3").setVisible(false);
    alert("Please choose the Asset_category");
}

2) Add an After Editing event to Project_name as well:

Input the following JavaScript codes:

var Year = this.options.form.getWidgetByName("Year");
var thislen = this.getValue().length;
if(thislen) 
{  //If any option of Project_name is picked, set Year and the Label widget Visible
    Year.setVisible(true);
    this.options.form.getWidgetByName("label5").setVisible(true);
}
else {  // If no option of Project_name is picked, set Year and the Label widget Not Visible
    Year.setVisible(false);
    this.options.form.getWidgetByName("label5").setVisible(false);
    alert("Please choose the Project_name");
}

2.3 Preview

Save the template and click [Pagination Preview]. The preview effect on a PC is shown as below:

1.cpt