Creating Delete button

In your application’s front end, you may want to remove records from time to time to keep your overviews clean, relevant, and free from data that no longer serves a purpose.

To remove these unnecessary records from a data table, you can add a button to each row that deletes the corresponding record from the data object used by the data component. In this article, we’ll walk through how to set up this delete functionality.

Getting started

Make sure you have a Data component (Data Container, Data Table or Data List) available on your page. This component needs to be able to provide the ID of the data record to the Delete action.

Drag an Action Button onto the canvas inside the Data component. 

In this example, we will drag an Action Button inside an empty Data Table Column.

Configure Action Button

Make sure that within the Action button options, the model ID (Project.Id) is passed through to the action. As a best practice, we also recommend renaming the button from ‘Action Button’ to something like ‘Delete record’. This way, you will be able to find it within your component tree easily.   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 in the Action option to start building the action.

Building Delete Record action

2. Then, in the action editor, click the Start step to connect the ID passed from the page builder to the action.

In the action variable window, create an input variable of the variable kind ‘Object’ and name it 'id', the same as the id we are using as input from the Data Container in the page builder — press Save.

Once this record input variable is created, the Action Button and the action are linked.

You can now add steps to the action canvas to define what should happen. In this case, you will configure the action to delete the record passed into it.

3. Drag the Delete Record step onto the canvas (between the Start and Finish step).

4. 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. 

Optionally, you can also specify a Result variable name. This is useful if you plan to extend the action flow later or want to log the outcome of your delete functionality.

Save the configuration of the Delete step. 

5. Compile your page (by pressing Play in the top left corner of the builder), and give the Delete button a test: