Secondary Confirmation During Row Deletion by JS

Problem

When you click the default deletion button, there is no secondary confirmation, which may result in accident deletion. This document describes how to achieve an effect that when you click a deletion button, a secondary confirmation prompt box pops up. The following figure shows the effect.

Implementation Method

Make a row deletion button through the Common button type, and add a click event to achieve the above effect. For details about the interface, see JS API Summary.

Note:

The function is not supported on mobile terminals.

Report Design

1. Create a database query dataset named ds1 and enter the SQL statement SELECT * FROM Sales.

2. Design the data entry table, drag the corresponding fields to cells from A3 to F3, and add text widgets respectively, as shown in the following figure.

3. Add a button widget to cell G3, set Common to Button Type, and set Delete Row to Button Name, as shown in the following figure.

Data Entry Attribute Setting

Choose Template > Data Entry Attribute and add Built-in SQL in Submit in the setting box, as shown in the following figure.

Note:

You are advised to select No Modification, No Update to prevent performance problems when submitting large amounts of data. If you cannot select the checkbox, consider the method in Example 2.

Click Event Adding

Select cell G3 and add a click event to it, as shown in the following figure.

The following content shows the JavaScript codes.

var cell = this.options.location;
//Obtain the ID of the cell where the current widget is located.
FR.Msg.confirm("Warning", "Sure to delete it？", function(value) {
	if (value) {
		_g().deleteReportRC(cell);
		//Delete the current row.
		//_g().verifyAndWriteReport();
		//Verify and submit data.
	}
})

You can only delete rows on the page through the row deletion button. If you need to trigger the submission event when deleting rows, replace the above codes with the following codes.

var cell = this.options.location;
//Obtain the ID of the cell where the current widget is located.
FR.Msg.confirm("Warning", "Sure to delete it？", function(value) {
	if (value) {
		_g().deleteReportRC(cell);
		//Delete the current row.
		_g().verifyAndWriteReport();
		Verify and submit data.
	}
})

Effect Display

Save the template and click Data Entry Preview. The preview effect is shown in the following figure.

Note:

If you have set the JS codes of Submit and deselect No Modification, No Update, each row deletion will trigger the overall submission of the page to achieve the effect of data deletion. If you only need to trigger the single-row-data deletion, select No Modification, No Update, or follow the method in Example 2.

Report Design

1. Create a database query dataset named ds1 and enter the SQL statement SELECT * FROM Sales.

2. Design the data entry table, drag the corresponding fields to cells from A3 to F3, and add text widgets respectively, as shown in the following figure.

3. Add a button widget to cell G3, set Common to Button Type, and set Delete Row to Button Name, as shown in the following figure.

4. Add a button widget to cell H3, set Common to Button Type, and name the button Delete Row (Hidden), as shown in the following figure.

Note:

The button type must be Common. The Delete Row button type will result in logic conflicts.

Deletion Submission Setting

1. Select the button widget of cell H3 and set a click event. Select Submit to Database and bind the corresponding primary key fields.

2. In the callback function, add JavaScript codes to implement the row deletion action and result submission prompt.

The following content shows the JavaScript codes.

if (fr_submitinfo.success) {
	_g().deleteReportRC(this.options.location);
	//Delete the current row.
	FR.Msg.toast('Deleted successfully.');
} else {
	FR.Msg.toast('Deletion failed. The error information is ' + fr_submitinfo.failinfo);
}

3. Hide the column H after you finish setting.

Secondary Confirmation Setting

Select the button widget G3 and set a click event to achieve the effect of the secondary confirmation before the row deletion.

The following content shows the JavaScript codes.

var cell = this.options.location;
//Obtain the ID of the cell where the current widget is located.
var cr = FR.cellStr2ColumnRow(cell);
//Obtain the IDs of the row and column where the current cell is located.
var delcell = FR.columnRow2CellStr({
	col: cr.col + 1,
	row: cr.row
})
//Obtain the ID of the cell on the right of the current cell.
FR.Msg.confirm("Warning", "Sure to delete it？", function(value) {
	if (value) {
		_g().getWidgetByCell(delcell).fireEvent("click");
		//Simulate the clicking button.
	}
})
Show Code

Effect Display

Save the template and click Data Entry Preview. The following figure shows the preview effect.

You can download the sample template.

Example 1: Secondary Confirmation During Row Deletion by JS - Example 1.cpt.

Example 2: Secondary Confirmation During Row Deletion by JS - Example 2.cpt.