Custom insert and delete column buttons

1. Problem description

The default insert and delete row button type has only two options: Insert Row and Delete Row.

So how to achieve the effect of inserting and deleting columns as shown in the figure below?

2. Implementation ideas

The insert and delete row buttons identify the data to be inserted and deleted according to the Parent-Child Cell Relation. Therefore, the button type still uses Insert Row and Delete Row, and the need to insert and delete columns is realized by setting the Parent-Child Cell Relation.

Note: Inserting and deleting columns does not support the scenario of vertical expansion of the field.

1. Design a data entry template

1) Create a new database query data set ds1

The SQL statement is: SELECT * FROM Sales

2) Design the filling form,

Add text widgets to cells B3~B8, and set the cells to expand horizontally, drag the data set field into the corresponding cell, as shown in the following figure:

2. Set Insert Column Button

Select cell B2, add a Button widget to the cell, drop down the button type to select Insert Row ,modify the button name to Insert Row, set the designated cell to B3, and set the rest of the default settings, as shown in the following figure:

3. Set delete column button

Select cell B1, add a Button widget to the cell, drop down the button type to select Delete Row, modify the button name to Delete Row, set the designated cell to B3, and set the rest of the default settings, as shown in the following figure:

4. Set parent-child cell

1) Select cell B3 

Set the Upper Parent Cell to None, as shown in the figure below:

2) Set parent-child cell

The Up Parent Cells on the B1 and B2 cells are both set to the B3 cell, as shown in the figure below:

5. Effect preview

1) PC terminal

Save the report, click to Data Entry Preview, the effect is as shown in the figure below:

2) Mobile

Both App and H5 previews are supported at the same time, and the effect is shown in the figure below:

The completed template can be found at: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\LineForm\

Click to download the template: Custom_insert_and_delete_column_buttons.cpt