Prerequisites
In order to understand the content of this lesson you need to first watch:
Introduction
In a Web 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 Platform you can easily model an administration section so that the Web application user can manage the application data. In this lesson we describe the best practices for modeling data management as regards the IFML model but we do not cover the business logic related to the server-side operations.
IFML Model Overview
The best practice is to have a unique page that allows the Web application user to manage the desired information. For the Data Management example, let’s continue working on our "CRM" Web application.
Let’s suppose that we want to manage the company information; we will model a page in which the user can create a new company, select a company from a list, and update the company’s information, or select a company from a list and delete it.
This is the IFML model to design if you want to obtain a result similar to the Web application shown before. The model is composed of different elements. Let’s review the purpose of each element in order to better understand the proposed IFML model.
The "List" component is configured to show all the existing companies to the user. That’s why the "Company" entity is used and no Conditional Expression is applied on the Component. This is a very general situation, but if you need to you can add your own Conditional Expression to the Component.
In this case we need an Entity-based "Form" component, so we select the "Company" entity. The "Form" component is associated with all the fields necessary to manage the company’s information (e.g., name, VAT, address, phone number, logo, nationality, website, creation date). The "Form" component is also applied as a Conditional Expression. The Conditional Expression allows you to preload all the fields with the information of one company, which can be the one company selected by the user from the list.
Notice a checkmark placed on the "Form" component. This icon reminds you that there is a set of Validation Rules for the fields composing the Form. A "Validation Rule" is a check that you can add on fields in order to be sure that the data inserted by the user complies with the requirements of the application domain. We do not cover this topic in this lesson, but you can find out about it by referring to the online documentation.
The "Navigation Flow" connecting the "List" component to the "Form" component is named "Edit", and it allows the Web application user to select an element from the list. The flow also binds information between the two connected Components. In this case, the company key is bound with the Form Component Key Condition. In this way the "Form" component is preloaded with the information of the selected element and the user can update it.
The "Navigation Flow" connecting the "Form" component to the page is named "Cancel" and it allows the user to reset the form without saving the changes. This Navigation Flow does not bind any information. Note that in order to reset the form it is not necessary to validate the user input, so you must remember to uncheck the "Validate" property.
The "Save Company" action refers to an existing "Action Definition" containing all the business logic needed in order to create a new company or update the information of an existing one. In this lesson we do not cover the Action Definition modeling for data management. You can refer to the online lesson about Data Management: Action Definition for further information.
The "Navigation Flow" connecting the "Form" component and the "Save Company" action triggers the action execution. This Navigation Flow is named "Save", and it must bind all the information necessary to pass user input to the Action. The binding dialog in this case has on the right all the Input Parameters of the Action, which are inherited from the referenced Action Definition. You must bind each of these input parameter with an output parameter from the form. The "company key" input parameter must be bound with the "VAT Code" of the "Form" component, which contains the key of the company the user is currently updating. The "company object" input parameter must be bound with the "Company Object" form output parameter, which contains all the fields values provided by the user when filling out the form.
The "Delete Company" action refers to an existing "Action Definition" containing all the business logic needed in order to delete an existing company. In this lesson, we do not cover the Action Definition modeling for data management. You can refer to the online lesson about "Data Management: Action Definition" for further information.
The "Navigation Flow" connecting the "List" component and the "Delete Company" action trigger the action execution. This Navigation Flow is named "Delete" and it must bind all the information necessary to pass the user input to the Action. The binding dialog in this case places on the right the key of the company to delete. You must bind this information to the "VAT Code" key attribute provided by the "List" component.
The "OK Flow" connecting the "Save Company" action to the page and the "Delete Company" action to the Page are for reloading the Page after the corresponding action has been correctly executed.
The "KO Flow" connecting the "Save Company" action to the error page and the "Delete Company" action to the error page show an error page when something goes wrong in the corresponding Action execution.
How to Model the IFML Pattern
Now that you have learned which elements compose the data management IFML model, let’s see in practice how to create the model in WebRatio Platform. Let’s continue working on our "CRM" web project in which we already added the Domain Model composed of the "Company" and "Employee" entities, and the "Administration" site view containing the "Company" area and the "Company Management" page. An "Error page" is used to tell the user that there was an error in the Web application execution. Finally the project contains the "Modules Definition View" named "Action Definition", which includes all the Action Definitions necessary to complete the model.
To show the list of all the Companies, let's use the "List" view component. Select the "List" view component from the toolbar section related to "View Components". Click on the Page to add it and type a name for it, for example "Companies". Let's start to define the Data Binding connection. Select the "Companies" Component and move to the Properties View. Press the "Select" button for the "Entity" property and choose the "Company" entity. Press the "OK" button to confirm. And now to add the display attributes to your List, press the "Select" button next to the property and choose the "Name" attribute; then press the "OK" button. Choose the desired Sort Attributes for the list by pressing the "Sort" button next to the "Sort Attributes" property. For example, choose the "Name" in ascending order, then press the "OK" button.
To provide the user with a form for inserting the company’s data, let’s use the "Form" component. Select the "Form" component from the toolbar section related to "View Components". Click on the "Page" to add it and type a name for it, for example "Company Info". Let's start to define the Data Binding connection. Select the "Company Info" component and move to the Properties View. Press the "Select" button for the "Entity" property and choose the "Company" entity. Press the "OK" button to confirm.
And now add the fields to the "Form" component. Right-click on the Component and select the "Entity Fields Wizard" option. By default in the opening dialog the Attributes and the Relationships of the Entity, except the primary key, are checked. Press the "Deselect All" button and select all the attributes you want to manage, for example name, address, phone number and so on. Then press the "Finish" button to confirm.
To let the user preload the "Form" component with the information about an existing company, let’s use a "Navigation Flow". Select the "Flow" item from the toolbar section related to "Flows" and click on the "List" component and then on the "Form" component. Select the "Flow" and move to the Properties View. Write a name for the flow, for example "Edit".
To let the user reset the form content, let’s use another "Navigation Flow". Select the "Flow" item from the toolbar section related to "Flows" and click on the "Form" Component and then on the "Page" component. Adjust the flow figure as desired; then select the "Flow" and move to the Properties View. Write a name for the flow, for example "Cancel". Remember to uncheck the "Validate" property since we do not want to validate fields.
Now let’s add the "Save Company" action. Select the "Action" item from the toolbar section related to "Containers" and click inside the "Company" area. Select the "Action" and move to the Properties View. Press the "Select" button next to the "Action Definition" property and select the "Save Company" action. Press the "OK" button to confirm.
Repeat the same steps for adding the "Delete Company" action.
To let the user save the changes of the company information, let’s use a "Navigation Flow". Select the "Flow" item from the toolbar section related to "Flows" and click on the "Form" component, and then on the "Save Company" action. Select the "Flow" and move to the Properties View. Write a name for the flow, for example "Save". Then double-click on the flow to make the binding. In the opening dialog, uncheck the "Enable Default Binding" property and bind the "company key" with the "VAT Code" field and the "company object" with the "Company Object" parameter provided by the "Form" component. Press the "OK" button to confirm.
To let the user delete a company, let’s use a "Navigation Flow". Select the "Flow" item from the toolbar section related to "Flows" and click on the "List" component and then on the "Delete Company" action. Select the "Flow" and move to the Properties View. Write a name for the flow, for example "Delete". Then double-click on the flow to make the binding. In the opening dialog, uncheck the "Enable Default Binding" property and bind the "company key" with the "Key VAT Code" attribute. Press the "OK" button to confirm.
To reload the page after the Action execution let’s use a "OK Flow". Select the "OK Flow" item from the toolbar section related to "Flows" and click on the "Save Company" action and then on the "Company Management" page. Adjust the flow figure as desired. Do the same for the "Delete Company" action.
To show an error page to the user when an Action execution fails, let’s use an "KO Flow". Select the "KO Flow" item from the toolbar section related to "Flows" and click on the "Save company" action and then on the "Error" page. Do the same for the "Delete Company" action.
Now that you have the complete model, press the "Generate and Run" button to see the result on the Web application.
Give Feedback to the User
The proposed model can be improved by providing a feedback message to the user, both when the execution of the action is successful and when there’s an error. The resulting IFML model with this improvement looks like this and lets the user work in a single page. To learn how to model feedback messages, please refer to the online documentation.