Overview
Version
| Version | Functional Change |
|---|---|
| 11.0 | / |
Application Scenario
During the report design process, you may need to query data by the data entry widget.
For example, after you select a region from the drop-down box, the list displays the data on the selected region after automatic filter, as shown in the following figure.
Implementation Method
You can add a drop-down box widget to the parameter panel, and hide the parameter panel. Then, you can add a drop-down box widget to the report page, and add an After Editing event for the widget to assign the value of the widget to the widget on the parameter panel and execute a query.
Example
Report Creation
Create a general report, as shown in the following figure.
Data Preparation
Create a dataset ds1 with the SQL statement SELECT * FROM Sales_Volume where 1=1 ${if(len(area)==0,"","and Region='" + area + "'")}, as shown in the following figure.
Setting the Widget on the Parameter Panel
1. Click the edit icon on the parameter panel to enter the parameter panel editing page, and click Add All on the right to add the parameter area to the parameter panel, as shown in the following figure.
2. Set the widget of the parameter area to Drop-down Box Widget, as shown in the following figure.
3. Select para on the right, and deselect Displaying Nothing Before Query, as shown in the following figure.
4. Move the hover to the bottom border of the parameter panel until the double-headed arrow appears. Press the left mouse button and drag the arrow upward to the top border to set the height of the parameter panel to 0. In this case, the parameter panel is hidden, as shown in the following figure.
Template Design
1. Enter the text content in cell B2, add a drop-down box widget to cell C2, and enter the formula $area, as shown in the following figure.
2. Select the drop-down box widget and click . In the Data Dictionary setting box, set Type to Database Table, set Database to FRDemo, set Database Table to Sales_Volume, and set both Actual Value and Display Value to Region, as shown in the following figure.
3. Enter the text content in cells B3 to E3, respectively, and drag the corresponding dataset fields into cells B4 to E4, as shown in the following figure.
4. Select cell E4, click Cell Element on the right, and select Summary and Sum separately in Data Setting, as shown in the following figure.
Adding an After Editing Event
Select cell C2, choose Widget Setting > Event, and add an After Editing event for the cell with the JavaScript code, as shown in the following figure.
The JavaScript code is as follows.
Note: /*Obtain the value selected from the area widget in cell C2.*/
var area1=this.getValue();
/*Obtain the drop-down box widget on the parameter panel.*/
var area2 =_g().getParameterContainer().getWidgetByName("area");
/*Assign the value to the drop-down box widget on the parameter panel.*/
area2.setValue(area1);
/*Execute a query.*/
_g().parameterCommit();Setting the Web Attribute for the Template
1. Choose Template > Web Attribute on the menu bar, click Data Entry Setting, and select Set for This Template Separately from the drop-down list of Following Settings.
2. Deselect Prompt Upon Leave Without Data Entry Submission and select Display Widget Directly, as shown in the following figure.
Preview Effect
PC
Save the template and click Data Entry Preview. The preview effect on PC is the same as that shown in section "Application Scenario."
Mobile Terminal
The following figure shows the effect on mobile terminals.
Template Download
For details, you can download the template Querying Data with the Widget on the Data Entry Page by JS.cpt.
Previous：Limiting the Text Length in the Text Box Widget by JS
