New form
Click file > create new form, as shown below:
Drag component
As shown in the above rendering, we can see that the form needs 1 drop-down box controls, a text control, two corresponding label controls, and a report block that displays data in tabular form. At this point, we decided to add a report block and four controls to the form.
In the introduction of components, we know that controls can exist in the form of components attached to the parameter panel or in the form of components alone. Both forms can be used at will, and the effect is the same, so use the form attached to the parameter panel component.
Parameter component
Drag the parameter component in the toolbar to the main body of the form, drag the corresponding drop-down box, text and two label controls into the parameter component, and set the control values of the label controls to order ID and customer ID respectively, as shown in the following figure:
Report block component
Drag the report component from the toolbar to the form, as shown in the following figure:
If the number of components is too large, the adaptive display in a page will be crowded when displayed on the web side. At this point, you can select the whole frame in the lower right and modify the component scale to adaptive original scale in the property page in the upper right, as shown in the following figure:
Full display area: when displayed on the web side, all components fill the entire browser page adaptively, and no scroll bar appears;
Adaptive scaling: it means that when displayed on the web, it is displayed according to the proportion of the component size when the form is made, and the whole web page is not scaled. If the page size is exceeded, a scroll bar will appear.
Control binding data
Define data set
In the rendering, the new data set DS 1: select * from order, where orderid=${orderid}, and the default value of the parameter orderid is 1000 1.
Note: The parameter name must be the same as the control name in the order ID drop-down box.
Order ID drop-down box
Select the drop-down box control and drag it to the appropriate position. The name of the drop-down box control is set to "orderid", and the data dictionary comes from the order table of FRDemo database (the data type is database table and the database is FRDemo). Both the actual value and the displayed value are order ID, and the control value is empty.
Customer ID text box
Select the text box control and drag it to the appropriate position. The text box control is named customerid, and the control value is selected as the bound field. The data comes from the customer ID field in ds 1 dataset, as shown in the following figure:
Note: ds 1 data set is selected here to realize the linkage between the drop-down box and the text box. The name of the drop-down box control is orderid, and the ds 1 dataset filters data according to the orderid parameter, that is, the ds 1 dataset filters data according to the value of the drop-down box control.
Report block
After setting the parameter panel and controls, click the stylus button in the report block to edit the report block.
New data set
In rendering, the report block should display the order detail data, filter it according to the order ID, and create a new data set ds2:select * from order detail where order ID=${orderid}, and the default value of orderid is 100 1.
Table sample design
As shown in the figure below, design the table sample:
At this point, the form has been made.
Save the form and preview it
Save the form. The suffix of the form template is. frm。 Click the preview button to preview, and you can see the effect.