JS implement custom options popover

1) Expected effect

For reports with a large amount of data, you can use text widgets, button widgets, and cell check boxes to customize an option popup window for query, as shown in the following figure. Click the select button, and the data selection window pops up to process records.

This method is recommended when a large number of drop-down options cannot be loaded.

2) Implementation roadmap

By passing parameter values through JS.

1. Preparing a master template

1) Data preparation

Create a general report, create a dataset ds1, SQL statement is: SELECT * FROM Client

2) Table design

•  Design the table as shown below and drag the field into the corresponding cell:

•  A3 cell property Cell Attributes>Display>Data dictionary>Database Table, select the "Client"table of the built-in database "FRDemoEN", the actual value is "CustomerID", and the displayed value is "Company_name", as shown in the figure below:

• Repeat and freeze the first two lines, as shown below:

3) Adding template parameters

Click Template>Template Parameters, add a text type parameter and rename it "company_name", as shown below:

4) Setting cell filtering

Add filter criteria for A3 cell elements: Select "CustomerID" for data column, "Contain" for operator, and "Parameter" for "$Company_name". The operation procedure is as follows:

5) Setting Parameters panel

•  Edit the parameter panel, click "Add All" above the widget Settings on the right to generate the parameter widget, delete the "Company_name" label widget, click the parameter box, and select "Text widget", as shown in the following figure:

• Drag the "Button widget" to the parameters panel and set the button name to "..." , the operation steps are as follows:

•  Click "Button widget" to add "Click event", as shown below:

The JavaScript code is as follows:

window.form = this.options.form;
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
$iframe.attr("src", "${servletURL}?viewlet=doc-EN%252FParameter%252FJS_implement_custom_options_popover.cpt&op=write&__showtoolbar__=false");
var o = {title : "Select information",width : 800,height: 300};FR.showDialog(o.title, o.width, o.height, $iframe,o);

Note: where?viewlet=doc-EN%252FParameter%252FJS_implement_custom_options_popover.cpt&op=writeis the last part of? Viewlet = in the URL when the subtemplate is previewed, where &op=write indicates that the subtemplate is previewed.

2. Preparing subtemplates

1) Data preparation

Create a common report and create dataset ds1. The SQL statement is :SELECT * FROM Client

2) Table design

• Combine A1 cell with B1 cell, reduce row height of the second column, merge A3 cell with B3 cell, and retain A4 cell add "Checkbox", and then drag the field into the corresponding cell of B4~H4. The design is shown in the table below:

• B4 cellAttributes>Display>Data dictionary> Data Query, select dataset ds1, the actual value is "Customer ID", and the displayed value is "Company _name", as shown in the figure below:

•  Repeat and freeze the first two lines, as shown below:

3) Adding button widgets

•  Add "Button widget" to cell A1, and set the button name to "Process selected records". As shown below:

•  Add "After initialization" event to "button widget", as shown below:

The JavaScript code is as follows:

window.ceshi=[];

• Add "Click" event to "Button widget", as shown below:

The JavaScript code is as follows:

window.parent.form.getWidgetByName("公司名称").setValue(ceshi);
window.parent.FR.closeDialog();
window.parent.FR.destroyDialog();

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

4) Adding a check button widget

Add "Checkbox" to cell A4, add "state change" event, set parameter a, the value is formula =B4, the operation steps are as follows:

The JavaScript code is as follows:

var value = this.getValue();
if (value == true) {
 ceshi.push(a);
} 
else if (value==false){
 ceshi.splice($.inArray(a,ceshi),1); 
}

3. Effect preview

Save the master template and child template respectively. Click "Pagination preview" for the master template, and the effect is as shown below:

Note: Mobile terminal is not supported.

1) Master template

For the completed template, see: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\parameter\JS_implement_custom_options_popover_main.cpt

Click to download the template: 

JS_implement_custom_options_popover_main.cpt

2)Subtemplate

See  %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\parameter\JS_implement_custom_options_popover.cpt

Click  to download the template: 

JS_implement_custom_options_popover.cpt

In this paper, the "master template" uses cell filtering, and the "Subtemplate" returns the parameter type "Array". If SQL statements are used for parameter filtering without cell filtering, subtemplate must return "String" separated by ", "; otherwise, multi-value query cannot be performed.

1) Change the master template database query statement to:SELECT * FROM Client where 1=1 ${if(len(Company_name)=0,""," and CustomerID in ('"+Company_name+"')")}  as shown below:

2) Modify the JS code for the "Click2" event in cell A1 of "Subtemplate".Change SetValue (ceshi) to setValue(ceshi.join("','")) As shown below:

3) Save the templates separately, click "Pagination Preview" for the master template, and the effect is as shown below: