JSで階層関係を持つウィジェットを制御する

1. Problem description

When the parameters are linked, if there is a hierarchical relationship between the parameters, it is often necessary to set the parameters according to the hierarchical relationship. When the user's operation does not meet the hierarchical relationship, it is necessary to give a pop-up prompt.

For example, the effect realized in the following example: when querying, users need to select parameters in the order of shipmethod > shipport. If you directly select the shipper city first, a prompt box will pop up, indicating that the operation is illegal.

2. Implementation ideas

Add the JS event before editing to the secondary parameter widget. If there is no content in the control's superior parameter control, the illegal operation prompt box will pop up.

1. Data preparation

Create a new data set DS1 and write it into the database query:

select * from orders

where shipmethod='${shipmethod}' and shipport='${shipport}'

Create a new data set DS2 and write it into the database query statement: select shipmethod from orders

Create a new data set DS3 and write it into the database query statement: select shipport from orders where shipmethod='${shipmethod}'

2. Design form

1) Design the table style as shown in the figure below.

2) Add the parameter shipmethod and shipport to the parameter management panel.

3) The drop-down box of the parameter shipmethod is bound to the data dictionary.

4) The drop-down box of the parameter shipport is bound to the data dictionary.

3. Adding events

Select the drop-down box control of the parameter owner city to add a JS event before editing. The code is as follows:

var a=_g().parameterEl.getWidgetByName('shipmethod').getValue();
if(a.length<=0){
FR.Msg.alert("Prompt",'Please select shipmethod first'+a);
};

4. Effect preview

1) PC terminal

Save the report, click pagination preview, and when you first drop down to select the shipport, a prompt box will pop up with the message "please select the shipmethod first". The effect is the same in I.1

2) Mobile terminal

The effect of mobile terminal is shown in the following figure:

For completed templates, please refer to:

%fr_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Parameter\JS_para_linkage.cpt

Click to download the template:

JS_para_linkage.cpt