This how-to explains how you can configure a delete object action in Mendix Studio.
This how-to will teach you how to do the following:
This how-to describes the following use case: you would like to delete the customer’s name from a list of customers.
You can configure the Delete Object on click action for such widgets as buttons or a static image. In this how-to, a Delete button is used as an example of a widget with Delete Object on click action. For more information, see the Delete Object Action section in Events Section.
2 Configuring the Domain Model and Creating a Page
To list customers’ names and to show a more detailed information under the list, you need to create an entity Customer, add attributes Name and Address to it, and then create a page where you will list names of customers.
To configure the domain model and create a page, do the following:
Open your domain model.
Create an entity Customer. For more information on how to create an entity, see the Adding New Entities section in Domain Models Overview.
For the Customer entity, create an attribute (for more information on how to create an attribute, see the Adding New Attributes section in Domain Models Overview) and do the following:
a. Set the Name of the attribute to Name.
b. Set the Type to String.
c. Click Create to add the new attribute.
Repeat step 3 to create an attribute Address of string type.
Now you need a page where customers’ names will be listed. Create a blank page and name it Customers. For more information on creating pages, see the Creating a New Page section in Pages.
A new blank page is created.
3 Configuring a Delete Object Action in a List View
Now you will configure a list view and will add a button with Delete Object action that deletes the corresponding customer when a user clicks the button. Do the following:
Open the page Customers that you have created.
In Building Blocks > Lists find List 1, drag and drop it to the page. This building block contains a list view in it by default.
Now you need to configure the list view. Open the list view properties and do the following:
a. Select Database as Data Source.
b. Set Entity to Customer.
Now the list view is connected to the Customer entity.
Select the text Name and do the following in Properties:
a. In Content, delete the text Name.
b. Click Add attribute (or press Ctrl + Space) and select the Name attribute.
Now the text widget is connected to the Name attribute, and will show you customers’ names in a list.
Click the button displayed as an arrow and delete it.
In Toolbox > Widgets > Buttons find Delete Object, drag and drop it inside the container that is left from the arrow button.
In Properties for the Delete button, you can see that the On Click action is set to Delete Object automatically, and caption is set to Delete, because the widget is preconfigured in Studio.
You have created the page that lists customers’ names. When an end-user clicks Delete in one of the lines, the customer who is selected in this line will be deleted from the app along with the customer’s details. For more information, see the Delete Object Action section in Events Section.
4 Configuring a Delete Object Action in a Data View
You can also configure the Delete Object action in a data view. In this case Delete Object will delete the connected object. To configure the data view and the Delete button on your page, do the following:
On the page named Customers, open the Layout Grid properties (use a breadcrumb at the bottom of the screen to select the layout grid).
In Properties > Add Row, click the button that adds a row below. You will use this row to place a data view there.
In Toolbox > Widgets > Data Containers, find the data view widget, drag and drop it inside the column (that was added together with a new row).
Now you need to configure the data view. In Properties of the data view, do the following:
a. Set Data Source to List widget.
b. Set Widget to List View with entity Customer. Now the data source for the data view is the list view that is placed on the same page.
You need to fill the data view with data. In Toolbox >Widgets > Typography, select Text, drag and drop it inside the data view.
You will make a heading out of the Text widget you have just added. Open the Properties of the Text and do the following:
a. In Content, delete the word Text and type Customer Details.
b. Set Render Mode to H4.
Now you will add a text box to display details of the selected customer. In Widgets > Input Elements, select Text Box, drag and drop it inside the data view content.
Open the Properties of the Text Box, and in Data Source, set Attribute to Name (the label for the text box will be changed to Name automatically).
Repeat step 7 to add one more Text Box to the page.
Open the Properties of the Text Box, and in Data Source, set Attribute to Address (the label for the text box will be changed to Address automatically).
In Toolbox > Widgets > Buttons find Delete Object, drag and drop it inside the data view.
The button is already preconfigured: its On Click Action is set to Delete Object, and Caption is set to Delete. But you will add some styling to it. Do the following:
a. In the General section, set Style to Danger.
b. In the Design section, set Align Self to Right.
You have configured the data view that will show you the customer’s name and address once you select this customer in the list:
The workflow for the Delete button in the data view (the red Delete button) is the following:
An end-user selects a customer’s name in the list.
The customer’s details (name and address) are shown in the data view below.
The user clicks Delete.
Whole customer’s record is deleted.
For more information on the delete object action, see the Delete Object Action section in Events Section.
Congratulations! You have configured Delete buttons in the list view and in the data view.