Discuss

Deleting Database Records with Confirmation

On this page
You can add a Bootstrap 4 styled confirm dialog when deleting a database record, using the Flow Component and Bootbox Dialogs integrated in it. This way you can avoid accidentally deleting records.

On our page we added a dynamic table, listing the records from our database. We added a simple HTML button in one of the table cells, which will be used to delete the selected record.

Setting up Delete Record Server Action

First we need to create a delete record server action. Open the Server Connect Panel and add new Server Action:

Screenshot_4|690x414

We call it delete. Then open Globals:

Screenshot_5|690x414

Right click $_GET and add new variable:

Screenshot_6|690x414

We are going to use this $_GET variable to pass the ID of the record we are deleting. So we call it clientid:

Screenshot_7|690x414

Then right click steps, and add a Database Connection:

Screenshot_8|690x414

Load an existing connection or setup a new one. Right click the database connection step, when you are done:

Screenshot_9|690x414

Open Database Actions and select Database Delete:

Screenshot_10|690x414

Click the Delete Options button:

Screenshot_11|690x414

Select the table, which contains your records:

Screenshot_12|690x414

It will automatically add the identity column and assign a $_POST variable to it. We don't need the $_POST variable in this case, so we click the dynamic data button:

Screenshot_13|690x414

And then we select the $_GET variable, which we created:

Screenshot_14|690x414

Click OK:

Screenshot_15|690x414

Then save your server action and close the Server Connect panel:

Screenshot_16|690x414

Setting up the Delete Flow

Open the App Connect panel. We are going to create a Flow, which shows a confirmation dialog and reloads the records listed on the page, after the delete is completed.

Select App, then add new component:

Screenshot_17|690x414

Open Workflows and select Flow:

Screenshot_18|690x414

Edit Flow:

Screenshot_19|690x414

First, we need to add an input parameter which will send the selected record ID to the delete record server action. Right click $params under input and add a Variable:

Screenshot_20|690x414

We call it clientid - same as the Delete Record $_GET variable (it's not mandatory to be the same) so it's easier to maintain the flow:

Screenshot_21|690x414

Right click the flow steps, open Bootbox Dialogs and select Confirm:

Screenshot_22|690x414

Add a name for your Confirm step:

Screenshot_23|690x414

Then add a message, to be displayed when the user clicks the delete button:

Screenshot_24|690x414

Add a title for the confirmation dialog:

Screenshot_25|690x414

You can customize the text and colors for the Confirm and Cancel buttons of the confirmation dialog. That's optional, so you can also use the default values and colors if you like:

Screenshot_26|690x414

When you are done setting up the dialog, right click steps under then to select what should happen when the user clicks the confirm button:

Screenshot_27|690x414

We need to run the delete action of course, so select Data Sources and then click Server Connect:

Screenshot_28|690x414

Click the Select Server Action button:

Screenshot_29|690x414

And select the Delete Action which we created:

Screenshot_30|690x414

You will see the $_GET parameter which we are using in the Server Action to pass the selected record ID. Select the dynamic data picker button:

Screenshot_31|690x414

Here we select the clientid parameter which we added under $param in the Flow:

Screenshot_32|690x414

We are done setting up the delete part. Now we want to reload the data on the page, after a record has been deleted. Right click the server connect step which we just set up:

Screenshot_33|690x414

Open Control Flow and select Run:

Screenshot_34|690x414

Add a name for this step and select an action to run:

Screenshot_35|690x414

Under the Server Connect, used to list the records on the page, select Load and add it. Click the select button, after you add it:

Screenshot_36|690x414

Then click the Save button:

Screenshot_37|690x414

Running the Delete Flow on Click

Our Delete Record flow is ready. Now we need to run it when the Delete button is clicked. Select the button and add new Dynamic Event:

Screenshot_38|690x414

Select Mouse > Click:

Screenshot_39|690x414

And click the Dynamic Action Picker button:

Screenshot_40|690x414

Under the Flow component select Run and add it:

Screenshot_41|690x414

We need to pass the selected record ID to the deleteid Flow Parameter. Click the dynamic data picker button:

Screenshot_42|690x414

And select the Record ID returned from our repeat region:

Screenshot_43|690x414

Click Select, then save your page.

A nice delete confirmation dialog appears and when a record is deleted, the data on the page is refreshed:

flow-confirm-delete|690x326