This how-to explains how you can configure a delete object action in the Mendix Web Modeler.
This how-to will teach you how to do the following:
This how-to describes the following use case:
You want to be able to delete the customer’s name from the 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 we use a Delete button as an example of widget with Delete Object on click action. For more information, see section 2.3 Delete Object Action in Events Section in Widgets of the Web Modeler in the Web Modeler category.
To start this tutorial, make sure you have completed the following prerequisites:
3 Configuring the Domain Model and Creating a Page
To list customers’ names and to show a more detailed information under the list, we need to create an entity Customer, add attributes Name and Address to it, and then create a page where we will list names of customers.
To configure the domain model and create the page, do the following:
Open your domain model.
Create entity Customer. For more information on how to create the entity, see section 3 Adding New Entities in Domain Models Overview in the Web Modeler.
For the Customer entity, create an attribute (for more information on how to create an attribute, see section 4 Adding New Attributes in Domain Models Overview in the Web Modeler) 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 we need a page where customers’ names will be listed. Create a blank page and name it Customers. For more information on creating pages, see section 3.2 Creating a New Page in the Page Editor Overview in the Web Modeler.
A new page is created.
4 Configuring a Delete Object Action in a List View
Now we 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 we 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 us the customers names in a list.
Click the button displayed as 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 the Web Modeler.
We have created the page that lists the customers names. If a user clicks Delete in one of the lines, the customer who is indicated in this line will be deleted from the app along with the customer’s details. For more information, see section 2.3 Delete Object Action in Events Section in Widgets of the Web Modeler in the Web Modeler category.
5 Configuring a Delete Object Action in a Data View
We 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 find the layout grid).
In Properties > Add Row, click the button that adds a row below that we need to place the data view there.
In Toolbox > Widgets > Data Containers, find data view, drag and drop it inside the column (that was added together with a new row).
Now we 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.
We need to fill the data view with data. In Toolbox >Widgets > Typography, select Text, drag and drop it inside data view content.
We will make a heading out of the Text widget we 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 we 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 we 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.
Now we have configured the data view that will show you the customer’s name and address once you select this customer in a list.
The workflow for the Delete button in the data view (the red Delete button) is the following:
A user selects a name of the customer in a 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, see section 2.3 Delete Object Action in Events Section in Widgets of the Web Modeler in the Web Modeler category.
Congratulations! You have configured Delete buttons in a list view and in a data view.