Skip to main content
Creating a delete button

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

Updated over a week ago

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.

Adding an action button to a data table

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.

Action button options

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.

'Start' action step

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.

Adding a new record variable to the action step

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.

An action flow with a delete record 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.

Delete record 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!

Delete record functionality within a

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.

Did this answer your question?