JS custom insert and delete row buttons

1. Expected effect

Use the insert and delete button, each row has a button, when the amount of data is too large, too many buttons will cause the template to load slowly. How to use only one insert and delete row button to insert a row of data or delete a row of data at the row position where the mouse is clicking? Effect as shown below:

2. Realization idea

Add buttons to the template and customize them as insert and delete buttons, which are realized by adding "click" events to buttons. 

1. Prepare template

Open the built-in template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\RowForm\Simple_Row-based_Form.cpt

2. Add button widget

Add "Button" widget to cell J1 and cell K1, select "Common" as the button type, change the name of the button in cell J1 to "Insert a row", and change the name of the button in cell K1 to "Delete a row". As shown below:

3. Add button event

1) Add a click event for the button in cell J1 to realize the function of adding a row when the button is clicked, as shown in the following figure:

The JavaScript code is as follows:

contentPane.appendReportRC(1);//Click the button to insert a row

2) In the same way, add a click event to the button in cell K1 to realize the function of deleting a row when the button is clicked. The JavaScript code is as follows:

contentPane.deleteReportRC();//Click the button to delete a row

4. Preview effect

Save the template, click "Data Entry Preview", the effect is shown in section I.1.

Note: Mobile terminal is not supported.

Refer to the completed template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\DataEntey\DataEntryApplication\AddDelete.cpt

Click to download: 

AddDelete.cpt