Overview
Expected Effect
Data backfilling refers to the process of returning queried data to the displayed text box. You can use the method if you need to query data by a pop-up window and backfill the queried data.
For example, if you want to check which other products belong to the same category ID as that of a certain product, you can query the required data by a pop-up window and return the category ID to the text box, as shown in the following figure.
Implementation Method
You can design two templates: one as the main template and the other as the sub-template. When you click the query button in the main template, a pop-up window of the sub-template will appear. After you select a value in the sub-template, the value will be passed to the main template.
Example
Sub-template Preparation
1. Data Preparation
Create a dataset ds1 with the SQL statement SELECT * FROM Product where Product_name like '%${Product_name}%' order by ProductID.
The like operator is used in the Product_name parameter of the SQL statement for data querying. The backfilling template designed below will display data based on the default value set for the Product_name parameter after the pop-up window appears. For details, see section "Notes."
2. Table Design
Design the table style and drag the data columns with the corresponding titles into cells A2 to D2 separately, as shown in the following figure.
Select cell E2, select Widget Setting on the right attribute panel, select Button Widget from the drop-down list of Select Widget, and set the type, name, and icon of the button, as shown in the following figure.
Add a Click event to the button. You need to add a parameter val in the JavaScript and set the parameter value to the formula D2 in the Click event, as shown in the following figure.
The JavaScript code is as follows.
var form = window.parent._g(); //Get the parent window of the current page. (Namely, obtain the data entry page.)
var Widget = form.getParameterContainer().getWidgetByName('CategoryID');
Widget.setValue(val);
//form.setCellValue($("div.fr-trigger-editor.ui-state-enabled[widgetname='SUPPLIERS_NO']"),val);
//The index for assignment needs to be processed accordingly to ensure that values are correctly assigned to the corresponding cells.
//form.setCellValue(col,row-1,va2);
//Assign the value val to cell A2 where the text widget is located. Zero represents the first column, and one represents the second row.
window.parent.FR.closeDialog(); //After the value is obtained, the dialog box of the parent window is closed.
window.parent.FR.destroyDialog();
3. Save the report and rename the report JS_pop_up.cpt.
Main Template Preparation
1. Data Preparation
Create a dataset ds1 with the SQL statement SELECT * FROM Product where CategoryID = '${CategoryID}' order by ProductID.
The content backfilled in the JS_pop-up.cpt template above is the category ID.
2. Table Design
Design the table style, and drag the data columns with the corresponding titles into cells B2 to D2 separately, as shown in the following figure.
3. Parameter Setting
Add the dataset parameter CategoryID to the parameter panel, and select Text Widget for the widget. Drag a button widget to the right of the text widget. The pop-up window will appear after you click the button. Set the name of the button widget to button0_c and set an icon for the button widget.
Add a Click event for the button widget button0_c, as shown in the following figure.
The JavaScript code is as follows.
Note:window.form = this.options.form;//Assign the value of the current form to a global variable.
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");//Set the parameter of the iframe widget to define details of the widget, such as the name, height, and width.
$iframe.attr("src", "http://localhost:8075/webroot/decision/view/report?viewlet=JS_pop_up.cpt&op=view");//The template JS_pop_up.cpt is the sub-report displayed in the dialog box when you click the icon to query data.
var o = {
title: "Filter Required Data and Return",
width: 600, // Adjust the width of the dialog box.
height: 300 // Adjust the height of the dialog box.
};
FR.showDialog(o.title, o.width, o.height, $iframe, o); // The dialog box pops up.
4. Save the report and rename the report to JS_backfilling.cpt.
Effect Display
Open the JS_backfilling.cpt template, select Data Analysis Preview, and click the icon to open the pop-up window. Select the data row of Biscuits, click the corresponding category ID of Biscuits to backfill the category ID to the text box, and click the Query button to view other products in the same category as Biscuits.
Note:
Extended Example
The effect of the above-mentioned example can be previewed only on PC, but not on mobile terminals.
If you want to realize the same effect on mobile terminals, you can modify the above-mentioned solution.
1. Sub-template
Modify the JS code of the button in the sub-template to:
var form = window.parent._g(); //Get the parent window of the current page. (Namely, obtain the data entry page.)
var Widget = form.getParameterContainer().getWidgetByName('CategoryID');
Widget.setValue(val);
//form.setCellValue($("div.fr-trigger-editor.ui-state-enabled[widgetname='SUPPLIERS_NO']"),val);
//The index for assignment needs to be processed accordingly to ensure that values are correctly assigned to the corresponding cells.
//form.setCellValue(col,row-1,va2);
//Assign the value val to cell A2 where the text widget is located. Zero represents the first column, and one represents the second row.
FR.closeMobilePopup(); //Close the pop-up window of the sub-template.
2. Main Template
Set the Click event of the button widget in the main template to Mobile Pop-up. For details, see [General] Mobile Pop-Up.
3. Effect Preview
Template Download
Notes
The content of the pop-up window will change with the default value of the dataset parameter Product_name in the JS_pop_up.cpt template.
In the above-mentioned example demonstration, the default value of the parameter is empty, so the pop-up window will display all product information. The query function can also be achieved by the effect of the like operator.
For example, if the default parameter value is Juice, the pop-up window will display information for all products whose names contain the character Juice, as shown in the following figure. The same applies to strings.
Previous：Adding Seven Days to the End Date After Editing the Start Date by JS
