I. Overview
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].
You will learn |
---|
|
II. Sample
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: