I. Overview
1.1 Requirement
In making a filling report, how to make optional items invisible when they are not required to be filled in and how to make them visible when they are required to be filled in. See the effect as demonstrated below:
1.2 Solution
Make optional items visible or invisible by adding an After Editing event to the Drop-down Box widget via JavaScript.
| You will learn |
|---|
|
II. Sample
2.1 Template settings
Open the template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\First_Form.cpt
2.2 Widget settings
Add two Drop-down Box widgets into C12. Click the icon of Data Dictionary and a Data Dictionary setting pane pops up. In the pop-up setting pane, set the Type to Custom and add “Fill in” and “Do not fill in” respectively to the Actual Value and the Display Value.
2.3 Add an event
Click on the Drop-down Box widget in C12 and add an After Editing event, as shown below:
Input the following JavaScript codes:
var a = this.getValue(); // Get the current widget value
// If the current widget value is Fill in, the widget will be displayed, or it will be hidden
if (a == "Fill in") {
document.getElementById('r-12-0').style.display = '';
document.getElementById('r-13-0').style.display = '';
} else {
document.getElementById('r-12-0').style.display = 'None';
document.getElementById('r-13-0').style.display = 'None';
}
2.4 Preview
Save the template and click [Data Entry Preview]. The preview effect on a PC is shown as below:
Previous：JS Dynamically Display Current Time
