Displaying Corresponding Data on the Parameter Panel by JS

Version

Application Scenario

After selecting a customer name on the parameter panel, you want to display other information about the corresponding customer name on the parameter panel, which is similar to automatic data matching according to the widget value.

When you open a template for the first time, the parameter panel displays only the drop-down box widget without other information. After you select a value in the drop-down box widget, the parameter panel will display other information, as shown in the following figure.

Implementation Method

1. You can refer to method three in Automatic Data Matching According to the Widget Value, and set the values of some label widgets to SQL functions on the parameter panel. In this case, you can display the corresponding information in some label widgets after selecting a customer name in the drop-down box.

2. When you open a template for the first time, all label widgets are not displayed. After you select a value in the drop-down box, all label widgets will be displayed.

Label widgets whose values are set to SQL functions will not be displayed during the initial preview. These widgets will be displayed only after a value is selected in the drop-down box. In this case, no additional setting is required.

You can display the label widgets with fixed values after selecting a value in the drop-down box just by adding an After Editing event to the drop-down box widget.

Template Creation

Create a general report, as shown in the following figure.

Data Preparation

Create a database query ds1 with the SQL statement SELECT * FROM Orders where "Customer ID" ='${ID}', as shown in the following figure.

Report Design

Enter texts in cells A1 to G1, drag the corresponding data columns into cells A2 to G2, and design the report style by yourself, as shown in the following figure.

Adding Template Parameters

Add the template parameters name, position, addr, and phone, as shown in the following figure.

Note:

addr is the abbreviation for address. Since address is a system parameter, its use should be avoided. Therefore, the abbreviation addr for address is used here as a parameter name.

Binding Parameters to Widgets

1. Enter the editing page of the parameter panel, and add the parameters ID, name, position, addr, and phone to the parameter panel in sequence, as shown in the following figure.

2. Bind the parameter ID to the drop-down box widget, and bind the parameters name, position, addr, and phone to the label widgets respectively, as shown in the following figure.

3. Set Widget Value to Customer Name:, Contact Name:, Contact Position:, Company Address:, and Mobile Number:, respectively for LabelID, Labelname, Labelposition, Labeladdr, and Labelphone, as shown in the following figure.

4. Resize and relocate the parameter panel and widgets, as shown in the following figure.

5. Set Data Dictionary for the drop-down box widget, as shown in the following figure.

6. Set Widget Value to the formula sql("FRDemoEN", "select Contact_name from Client where CustomerID='" + $id +"'", 1, 1) for the parameter widget name, as shown in the following figure.

Note:

The formula executes an SQL query in the FRDemoEN connection and returns the result of the first column and first row. Depending on different requirements, you can remove the last 1 from the formula to display the result of the first column. The items in the result are separated by comma in rows on the parameter panel.

7. Similarly, set Widget Value for the parameter widgets position, addr, and phone.

Note:

The || operator in the formula of the widget value for the parameter widget addr concatenates two string values into one.

Set Widget Value to the formula sql("FRDemoEN","select Position_of_contact_person from Client where CustomerID='" + $id + "'",1,1) for the parameter widget position.

Set Widget Value to the formula sql("FRDemoEN","select City||Address from Client where CustomerID='"+$id+"'",1,1) for the parameter widget addr.

Set Widget Value to the formula sql("FRDemo","select Telephone_number from Client where CustomerID='"+$id+"'",1,1) for the parameter widget phone.

8. Deselect Visible for Labelname, Labelposition, Labeladdr, and Labelphone, as shown in the following figure.

Setting an After-Editing Event for the Drop-down Box

Add an After Editing event to the drop-down box, as shown in the following figure.

The JS code is as follows:

var a=this.options.form.getWidgetByName("Labelname");
a.setVisible(true);
var b=this.options.form.getWidgetByName("Labelposition");
b.setVisible(true);
var c=this.options.form.getWidgetByName("Labeladdr");
c.setVisible(true);
var d=this.options.form.getWidgetByName("Labelphone");
d.setVisible(true);

Effect Display

Note:

 The effect cannot be previewed on mobile terminals.

The effect on the PC is the same as that shown in section "Application Scenario."

For details, you can download the template Displaying Corresponding Data on the Parameter Panel by JS.cpt.