Overview
Version
| Version | Functional Change |
|---|---|
11.0 | / |
Application Scenario
During questionnaire template creation, a scenario may occur: Multiple options are provided, with the last one being Others.
When you select Others, a dialog box pops up, allowing you to enter other values.
If you enter nothing and click OK, a prompt will pop up to remind you to enter the content. If you enter the content and click OK, the content entered will be backfilled to the report, as shown in the following figure.
Implementation Method
You can add a State Change event for the radio button group widget. With the event, a dialog box will pop up when you select Others, and the content entered in the dialog box will be assigned to the designated cell.
For details about the API description, see JS API Summary.
Example
Template Creation
Choose File > New General Report on the menu bar to create a template, as shown in the following figure.
Template Design
Widget Adding
Add a radio button group for cell B1, and design the report style, as shown in the following figure.
Data Dictionary Setting
Select cell B1, choose Widget Setting > Attribute > Advanced > Data Dictionary, and set the custom data dictionary, as shown in the following figure.
Event Adding
Select cell B1, choose Widget Setting > Event, and add a State Change event, as shown in the following figure.
The JS code is as follows:
var value = this.getValue(); //Obtain the value of the current widget.
if (value == "Others") {
function promptForInput() {
FR.Msg.prompt("Enter", "Please enter your hobby:", "", function(result) {
//Obtain the value in the input box.
var inputValue = result && result.toString().trim(); //Clear the spaces before and behind the obtained value in the input box.
if (inputValue) { //If you enter the corresponding content, the value will be assigned to cell B2.
_g().setCellValue(0, 1, 1, inputValue);
} else if (result === null) {
//If you click Cancel, the content in cell B2 will be cleared.
_g().setCellValue(0, 1, 1, "");
} else { //If you click OK but enter nothing, the prompt will be displayed.
FR.Msg.alert("Prompt", "The input content cannot be empty. Re-enter it again!", function(result) {
promptForInput(); //After you click OK, the input box will pop up again.
});
}
});
}
promptForInput(); //If the value is "Others", the input box will pop up.
} else {
//If the value is not "Others", the value will be directly assigned to cell B2.
_g().setCellValue(0, 1, 1, value);
}
Effect Display
PC
Save the template and click Data Entry Preview. The following figure shows the effect.
Mobile Terminal
The following figure shows the effect on mobile terminals.
Template Download
For details, you can download the completed template Entering the Value in the Dialog Box Popping up After Clicking the Radio Button by JS.cpt.
Previous：Obtaining All Values Selected in the Extended Widgets by JS
