Creating a delete button

Deleting data via your applications front end by building your own delete button.

Within your applications front-end you might have data that you would want to delete to keep a clear overview of the data you actively need and to get rid of unnecessary data that is only taking up space.

To get rid of the unnecessary data in our data table we can create a button on the record of the data table that deletes the data from the object shown in the Data container. In this article, we’ll go into how you can create your delete functionality.

Getting started

Make sure you have a data container such as a data table available on your page. The data container needs to be able to provide the ID of the data record to the delete action.

Drag an action button onto the canvas inside of the Data container.

In this example, we will drag an action button inside an empty data table column.

Configure the action button

Make sure that within the Action button options, the model.id is passed through to the action. As a best practice, we also recommend renaming the button from ‘Action button’ to something like ‘Delete button’, this way you will be able to easily find it within your component tree.     Add some flavor of your liking to the button, such as changing the text of the button or adding an icon. Then click on the pencil icon at the action option to start building the action.

Configuring the action

Within the action, click the Start step of the action to connect the ID we are giving from the page builder to the action.

In the action variable window, create an input variable of the variable kind ‘Record’ and name it id (in lower case), the same as the id we are using as input from the data container in the page builder — press Save.

Once the record input variable has been created, the button and the action are connected.

We can now drag steps onto our action canvas and determine what we want the action to do, in this case, we would like to delete the data provided to the action.

Drag the delete step onto the canvas between the start and finish step.

Click on the delete record step and click on the ‘select variable’ field underneath the record option. Select the id object and press select in the bottom right corner of the variable select prompt. Press save to save the configuration of the delete step.

Once the delete step has been saved, the action and button can delete the data corresponding to the container the button is placed in.

Compile your page, and give the delete button a test, but be sure to test it with test data!

Warning! Deleted data cannot be returned, so be careful when pressing the button on fields you don’t want to have deleted. You could build in an extra step to confirm the delete action by using the dialog component.