JS realizes the second confirmation when deleting

1. Problem description

The default Delete Row button, clicking delete will not confirm the second time, so it may be deleted by mistake. If you want to click the Delete Row button, you can pop up a prompt box to confirm the deletion, how to achieve it? The effect as shown below:

2. Implementation ideas

Through the FR.Msg.confirm() method, the second confirmation when deleting is realized. For interface description, please refer to:API Interface Summary.

Note: Mobile terminal is not supported.

1. Design report

1) Create a new database query dataset ds1 

The SQL statement is: SELECT * FROM Sales

2) Design the filling form

Drag the corresponding fields into cells A3-F3, and add "Text widgets" respectively, as shown in the figure below:

3) Add a button widget to the G3 cell

Select "Common" for the Button Type, and fill in "Delete Row" for the Button Name, as shown in the figure below:

2. Set Data Entry Attributes

Select "Template>Data Entry Attributes" from the menu bar, add "Built-in SQL" to submit, and the settings are as shown in the figure below:

Note:You are advised to select "No modify,no update" to prevent performance problems when a large amount of data is submitted.  If scenario restrictions cannot be selected, consider Example 2.

3. Add click event

Select cell G3 and add "Event>Click", as shown in the figure below:

The JavaScript code is as follows:

var cell = this.options.location;
//Get the number of the cell where the current control is located
FR.Msg.confirm("Warning", "Are you sure you want to delete?", function(value) {
        if (value) {
                _g().deleteReportRC(cell);
                //Delete the current line
        }
})

The Delete Row button will only delete the current row from the page. If you need to trigger a submit action when deleting a row, replace it with the following JavaScript code:

var cell = this.options.location;
//Get the number of the cell where the current control is located
FR.Msg.confirm("Warning", "Are you sure you want to delete?", function(value) {
	if (value) {
		_g().deleteReportRC(cell);
		//Delete the current line
		_g().verifyAndWriteReport();
		//Verify and submit
	}
})

4. Effect preview

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

Note: If the submitted JS is set, then when the "No modify,no update" is not checked, each deletion of a row will trigger the overall submission of the page to achieve the effect of deleting data. If you only want to trigger the deletion of a single row of data, you must check "No modify,no update", or you can refer to the method in Example 2 for implementation.

1. Design report

1) Create a new database query dataset ds1

The SQL statement is: SELECT * FROM Sales

2) Design the filling form

Drag the corresponding fields into cells A3-F3, and add "Text widgets" respectively, as shown in the figure below:

3) Add a button widget to the G3 cell

Select "Common" for the Button Type, and fill in "Delete Row" for theButton Name, as shown in the figure below:

4) Add a button widget to the H3 cell, 

Select "Common" for the Button Type, and fill in "Delete Row (Hidden)" for the Button Name, as shown in the figure below:

Note: It must be a "Common" type button. The "Delete Row" type button will have logic conflicts.

2. Set delete submission

1) Select the Button widget of H3 and set a Click event. 

Select "Commit to Database>Delete Submit" to bind the corresponding primary key field.

2) Add JavaScript code

In the callback function, add JavaScript code to realize the delete action and submit the result prompt.

The JavaScript code is as follows:

if (fr_submitinfo.success) {
	_g().deleteReportRC(this.options.location);
//Delete current line
	FR.Msg.toast('Successfully deleted');
} else {
	FR.Msg.toast('The deletion failed, the error message is:' + fr_submitinfo.failinfo);
}

3) Hide H column after setting.

3. Set the second confirmation

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

The JavaScript code is as follows:

var cell = this.options.location;
//Get the number of the cell where the current control is located
var cr = FR.cellStr2ColumnRow(cell);
//Get the row and column number of the current cell
var delcell = FR.columnRow2CellStr({
	col: cr.col + 1,
	row: cr.row
})
//Get the cell number of the column after the current cell
FR.Msg.confirm("Warning", "Are you sure you want to delete?", function(value) {
	if (value) {
		_g().getWidgetByCell(delcell).fireEvent("click");
		//Simulate clicking the button
	}
})

4. Effect preview

Click to download the template

Example 1: JS_realizes_the_second_confirmation_when_deleting_example_one.cpt

Example 2: JS_realizes_the_second_confirmation_when_deleting_example_two.cpt