Data Management: Deleting Data

IFML Modeling with WebRatio Mobile Platform
426 views Published on Feb 14, 2015 | Time 12 min
Applies to: 8.0 or higher

In a mobile application, you often need to manage information that is shown to the user. Managing the information means to create, update, or delete information. With WebRatio Mobile Platform you can easily model a section so that user can manage the application to delete the data. In this lesson you learn how to model a screen that allows to the user to delete an object in WebRatio Mobile Platform.

Transcript

Table of contents

Prerequisites

In order to understand the content of this lesson, make sure you watched the following lessons:

Introduction

In a mobile application, you often need to manage information that is shown to the user. Managing the information means to create, update, or delete information. With WebRatio Mobile Platform you can easily model a section so that user can manage the application to delete the data.

In this lesson you learn how to model a screen that allows to the user to delete an object in WebRatio Mobile Platform.

How to Model the User Interaction

We work on "CRM" mobile project. Let’s suppose that you want to manage the company information, with a screen in which the user can select a company from a list and delete it. We have already defined in the Domain Model the information representing a company for the "CRM" mobile app. Let's open the "App View" of the Mobile Project and start to model.

First of all, let's add a "Screen" view container where you show the companies list. Click on the "View Container" section of the toolbar, choose the "Screen" item and placeit in the work area. Type a meaningful name for the Home Screen, such as "Companies".

To show the list of all the companies, let's use the "List" view component. Click on the the "View Components" section of the toolbar, choose the "List" and click inside the "Companies" screen to add it. Type a name for the "List" component, such as "Companies".

The "List" view component is used to display a list of object instances. This is the most used component when you want to show a list of elements in a screen. Each instance is treated as a single object, as rows in the list. From the list, you can select a single row. The list of elements to be shown can be defined by using a "Data Binding".

Let's now define the "Data Binding" property. In the Properties View, press the "Select" button next to the "Data Binding" property and choose the "Company" Class. Then press the "OK" button. Now let's select which information of the company will be shown to the user in the list. We can use the "Display Attributes" property for this purpose. Press the "Select" button next to the "Display Attributes" property, to choose the desired attributes, in this example we are going to select the company name. Then press the "OK" button. Let's suppose that we want the list to be sorted alphabetically by company name. We can use the "Sort Attributes" property for this purpose. Press the "Sort" button next to the "Sort Attributes" property, choose the "Name" attribute with ascending sort and press the "OK" button.

In order to delete a company, the user must be able to select a company from the list and trigger the execution of an action, which deletes the company from the available ones. Let's add an "Action" to the model. Choose "Action" from the toolbar and click inside the work area to add it.

In order to let the user delete a company from the list, let's use a On Select Event with a "Navigation Flow". Select the "Navigation Flow" item from the "Flows" section of the toolbar by connecting the "List" component and the "Action". Click first on the "List" component and then on the "Action". Type a name for the "Event", such as "Search".

How to Model the "Delete" Behavior

The On Select Event represents the user interaction allowing the company selection. The "Navigation Flow" states that when the user selects an element from the list the action targeted by the flow is executed.

An "Action" is a container of operations and these operations should be defined in a dedicated section of the model. Let's open the Action Definitions View.

First of all, let's add an "Action Definition" where you model the Delete Operation. Press the "Add Action Definition" button. Type a meaningful name for the "Action Definition", such as "Delete Company". Open the "Action definition" by double-clicking on the it.

The "Action Definition" has a default structure with an entry point and two exit point. The "Input Port" is an interaction point between an action and the invoking environment.

The "Action Definition" should receive as input which is the company to be deleted. The easiest way to identify the company is it's primary key. To specify the inputs required by the "Action Definition" you have to add parameter to the "Input Port", which represents the entry point. Right-click on the "Input Port" to add a parameter. Choose the "Add" option and then "Port Definition Parameter" option. Type a name for the "Port Definition Parameter", such as "company key".

To delete the selected company, let's use the "Delete" operation. Select the "Delete" item in the "Operations" section of the toolbar. Click inside the work area to add the operation.

The "Delete" operation deletes one or more instances of a domain object. In our example the operation uses the “company key” parameter in order to retrieve the company to be deleted.

To state that the "Delete" operation must delete a company let's define the "Data Binding" property. Press the "Select" button next to the "Data Binding" property and choose the "Company" class to associate it. Press the "OK" button.

To state that the "Delete" operation is the first operation to be executed, let’s use a "Success Flow". Select the "Success Flow" from the "Flows" section of the toolbar, click first on the "Input Port" and then on the "Delete" operation. The "Success Flow" is the flow followed when an operation succeeds. The "Success Flow" also provides information to the "Delete" operation. In this case, it must provide the company key to be deleted. Double-click on the "Success Flow" to see the "Parameters Binding" dialog. Uncheck the "Enable Default Binding" property. To send the key of the company selected by the user and delete it from the list, bind the "company key" port parameter with the "Key Condition" and then press the "OK" button.

When the execution of the "Delete" operation is successful, the "Action Definition" must exit through the “Success Port". Let’s use the "Success Flow" for this purpose. Select the "Success Flow" from the "Flows" section of the toolbar, click first on the "Delete" operation and then on the "Success Port".

The "Success Port" is an Output Port of an "Action Definition" that represents the success of the Action's execution.

After the execution of the "Delete" operation, if an error occurs then the "Action Definition" must exit through the "Error Port". Let’s use the "Error Flow" for this purpose. Select the "Error Flow" from the "Flows" section of the toolbar, click first on the "Delete" operation and then on the "Error Port".

The "Error Port" is an Output Port of an Action Definition that represents the failure of the action’s execution.

Now that the definition is complete, let's use it in our model. Let's open the "App View".

Let's associate the "Delete Company" action definition to the "Action". Press the "Select" button next to the "Action Definition" property, to associate an "Action Definition", in this case choose the "Delete Company" action definition and then press the "OK" button.

The "Navigation Flow" also provides information to the "Action". Double-click on the "Navigation Flow" to see the "Parameters Binding" dialog. Uncheck the "Enable Default Binding" property. To send the company key selected by the user and run the delete, bind the "company key" parameter with the action parameter and then press the "OK" button.

The "Success Event" is an event that is activated when the action execution ends successfully.

In order to reload the screen after the action execution, let's use a Success Event with a "Navigation Flow". Select the "Navigation Flow" from the "Flow" section of the toolbar, click first on "Success Event" of the "Action" and then on the "Companies" screen.

The "Error Event" is an event that is activated when the action execution fails. In order to reload the screen after the action execution, let's use an Error Event with a "Navigation Flow", click first on "Error Event" of the "Action" and then on the "Companies" screen.

How to Emulate the Delete Operation

Generate the project to emulate the mobile application, by pressing the "Generate and Run" button.

From this section you can run the application on the browser or on your device. Press on the "Open Emulator" button to run the application on your PC.

Now you can see a list of companies. Select one company from the list to delete it. And select another company to delete it.