Custom Option Pop-up by JS

Version

Expected Effect

For reports with large data volumes, you can use the text widget, button widget, and checkbox widget to customize an option pop-up for querying. You can click the selection button to open the data selection pop-up for processing records, as shown in the following figure.

The method applies to the scenario where multiple drop-down options cannot be fully loaded just through widgets.

Implementation Method

All drop-down options in above-mentioned scenarios can be fully loaded by JS-based parameter value transferring.

Main Template Preparation

Data Preparation

Create a general report, and create a dataset named ds1. The SQL statement is SELECT * FROM Orders, as shown in the following figure.

Table Design

1. Drag the required fields into the corresponding cells, as shown in the following figure.

2. Set Type to Database Table under Cell Attribute > Display > Data Dictionary for cell A3. Select the built-in database FRDemoEN from the drop-down list of Database, and select the SClient table from the drop-down list of Database Table. Set Actual Value to CustomerID and Display Value to Company_name. The following figure shows the steps.

Select Repeat Title Row From No. 1 Row To No. 2 Row and Freeze No. 1 Row To No. 2 Row in the Repeat/Freeze setting box. The following figure shows the operation steps.

Template Parameter Addition

Choose Template > Template Parameter, add a text-type parameter, and rename it Company_name. The following figure shows the operation steps.

Cell Filter Setting

Click Cell Element and add a filter condition for cell A3 as follows: Select Customer ID from the drop-down list of Available Column, In from the drop-down list of Operator, and Parameter from the last drop-down list, and enter $Company_name in the text box. The following figure shows the operation steps.

Parameter Panel Setting

1. Click to edit the parameter panel, and click Add All on the upper part of the right Component Setting panel to generate a parameter widget. Delete the label widget Company_name. Click the parameter box, and select Text Widget. The following figure shows the operation steps.

2. Drag the button widget into the parameter panel, and set Button Name to .... The following figure shows the operation steps.

3. Click the button widget, and add a Click event. The following figure shows the operation steps.

The JavaScript codes are as follows:

window.form = this.options.form;// Assign the current form to a global variable
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
$iframe.attr("src", "${servletURL}?viewlet=Processing%2BData%2Bin%2BBatches.cpt&op=write&__showtoolbar__=false");
var o = {title : "Customer Information Selection",width : 800,height: 300};FR.showDialog(o.title, o.width, o.height, $iframe,o);

Note: In ?viewlet=Processing%2BData%2Bin%2BBatches.cpt&op=write, Processing%2BData%2Bin%2BBatches.cpt&op=write is the part next to ?viewlet= in the URL of the sub-template during the data entry preview. &op=write indicates the data entry preview of the sub-template.

Sub-template Preparation

Data Preparation

Create a general report, and create a dataset named ds1. The SQL statement is SELECT * FROM SClient, as shown in the following figure.

Table Design

1. Merge cell A1 and cell B1. Reduce the row height of the second row. Merge cell A3 and cell B3. Add a checkbox widget to cell A4, and drag the fields into the corresponding cells from B4 to H4. Design the table is shown in the following figure.

2. Set Type to Data Query under Cell Element > Display > Data Dictionary for cell B4. Select ds1 from the drop-down list of Dataset. Set Actual Value to CustomerID and Display Value to Company_name. The following figure shows the steps.

3. Select Repeat Title Row From No. 1 Row To No. 2 Row and Freeze No. 1 Row To No. 2 Row in the Repeat/Freeze setting box, as shown in the following figure.

Button Widget Addition

1. Add a button widget for cell A1, and set Button Name to Process Selected Records, as shown in the following figure. 

2. Add an After Initialization event for the button widget, as shown in the following figure.

The JavaScript codes are as follows：

window.ceshi=[];

3. Add a Click event for the button widget, as shown in the following figure.

The JavaScript codes are as follows:

window.parent.form.getWidgetByName("Company_name").setValue(ceshi);//Assign the value to the parameter of the main template. 
window.parent.FR.closeDialog();//After the value is obtained, close the dialog box of the parent window. 
window.parent.FR.destroyDialog();

Note: The name of the parameter for value assignment must be the same as that in the main template.

Checkbox Widget Addition

1. Set Left Parent Cell to cell B4 for cell A4.

2. Add a checkbox widget for cell A4. Add a State Change event, and set the parameter a to =B4. The following figure shows the operation steps.

The JavaScript codes are as follows.

var value = this.getValue();//Get the value of the current parameter.
if (value == true) {
 ceshi.push(a);//Place the selected parameter a into the window. 
} 
else if (value==false){
 ceshi.splice($.inArray(a,ceshi),1); 
}

Effect Display

PC

Save the main template and the sub-template respectively. Click Pagination Preview in the main template. The following figure shows the effect.

Mobile Terminal

Pagination preview is not supported on mobile terminals.

Template Download

Main Template

For details, you can download the template Large Data Volume Query.cpt.

Sub-template

For details, you can download the template Processing Data in Batches.cpt.

In the main template, the cell filtering is used, and the parameter returned by the sub-template is of the array type. If you use SQL statements for parameter filtering without setting cell filtering, the string returned by the sub-template needs to be separated by ',' (a comma enclosed in single quotation marks). Otherwise, multi-value queries cannot be performed.

1. Modify the SQL statement to SELECT * FROM Orders where 1=1 ${if(len(Company_name)=0,""," and Customer ID in ('"+Company_name+"')")}. Remain the parameter setting unchanged, as shown in the following figure.

2. Modify setValue(ceshi) in the JS codes of the Click event for cell A1 in the sub-template to setValue(ceshi.join("','")), as shown in the following figure. 

3. Save the templates respectively. Click Pagination Preview in the main template. The following figure shows the effect.