1. Overview
1.1 Application scenario
As shown below, when you want to check whether there are other products under the same category that milk belongs to, you can select milk in a pop-up window and then the category ID of milk will be backfilled to the text filed widget. By querying the category ID, you can view other products under the same category.
1.2 Solution
Design two templates A and B. Template A is used as a pop-up window when clicking a button in template B. After selecting the data in template A, specified information will be backfilled to a text field in template B.
2. Demo
2.1 Design template A
1) Prepare data for template A
Create a new dataset ds1:
SELECT * FROM Product
where Product_name like '%${Product_name}%'
order by ProductID
2) Design report body of template A
As shown below, drag the data columns to A2~D2.
Select cell E2 and add a button widget. Set the attributes for the button, as shown below.
Add a click event to the button. You need to introduce a parameter named val, whose value is formula: =D2. This parameter stores the category ID of the product selected by the button.
JS code:
var form = window.parent.contentPane; // get the parent template of template A, which is template B
var Widget = form.parameterEl.getWidgetByName('CategoryID');
Widget.setValue(val); // assign the category ID of the selected product (in template A) to the text field widget whose widget name is CategoryID (in template B)
window.parent.FR.closeDialog(); // close the dialog of template B, so that template A is closed
window.parent.FR.destroyDialog();
3) Save template A in reportlets and name it to JS_pop_up.cpt.
2.2 Design template B
1) Prepare data for template B
Create a dataset ds1:
SELECT * FROM Product
where CategoryID = '${CategoryID}'
order by ProductID
2) Design report body of template B
As shown below, drag data columns to B2~D2.
3) Edit parameter pane
Add the dataset parameter Category ID to the parameter pane, and select the widget type as text field. Drag a button widget to the right side of the text field and set a icon.
Add a click event to the button widget.
JS code:
window.form = this.options.form;
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
$iframe.attr("src", "http://localhost:8075/webroot/decision/view/report?viewlet=JS_pop_up.cpt&op=view");
var o = {
title : "Filter the required data and return",
width : 600,
height: 300
}; //The pop-up template path in the code needs to be adjusted according to actual application scenarios.
FR.showDialog(o.title, o.width, o.height, $iframe,o);
4) Save template B in reportlets and name it to JS_backfilling.cpt.
2.3 Preview
Open JS_backfilling.cpt, select Data Analysis Preview.
Click the button right to the text field in parameter pane, select a product in the pop-up window, and the category ID of the product is backfilled to the text field. Click the query button, you can view other products in the same category.
Tips: Pagination Preview, Data Entry Preview, and Data Analysis Preview are all applicable, but Mobile Preview is not supported.
3. Completed Template
4. Notes
The products shown in the pop-up window is changed according to the default value of parameter Product_name in template A.
In the example above, if the default value of this parameter is empty, the pop-up window will display the information of all products.
The effect can also be realized through using like operator in the SQL statement. For example, when the default value of the parameter is "Juice", the content of the pop-up window will display all products whose name contain "Juice", as shown below:
