List & Details

IFML Modeling with WebRatio Mobile Platform
1,758 views Published on Feb 13, 2015 | Time 8 min
Applies to: 8.0 or higher

The ability to show a list of elements and the details of each listed element is one of the most common patterns in Applications. This lesson shows you how to model the List & Details in WebRatio Mobile Platform.

Transcript

Table of contents

How to Model the List & Details

We are going to work on the "CRM" mobile project. Let’s suppose you want to model a list of companies by showing the most important information, such as the VAT Code, the name and the nationality. The remaining information is considered to be details. The details are shown in a second screen, only when the user selects a specific company from the list.

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 let's start to model.

First of all, let's add a "Screen" view container where to show the companies list. Select the "Screen" from the "View Containers" section of the toolbar and place it in the "Screen" view container 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. Select the "List" view component from the "View Components" section of the toolbar. Choose the "List", click inside the "Companies" screen to add the "List" view component, then type a name for the "List" view component, such as "Companies List".

NOTE. 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. Move to its Properties View. Press on the "Select" button next to the "Data Binding" property and choose the "Company" class. Press on the "OK" button to confirm your choice.

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.
In this example we are going to select the company name, the vat code and the nationality. Press the "Select" button next to the "Display Attributes" property, to choose the Display Attributes. Choose the desired attributes. Then press on the "OK" button to confirm your choice.

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, to choose the List's sorting. Choose the "Name" attribute with ascending sort. Press the "OK" button to confirm.

Let's now add the "Details" part of the pattern. Add an other "Screen" in the "App View". Select the "Screen" from the "View Containers" section of the toolbar. Select the "Screen" from the "View Containers" section of the toolbar. Place the second "Screen" in the work area. Give a meaningful name to the second screen, such as "Details".

To show the details of a company, let's use the "Details" view component. Select the "Details" component from the toolbar section of "View Components". Choose "Details" component, then click inside the screen to add the "Details" view component. Type a name for the "Details" cmponent, such as "Company Details".

The "Details" view component displays the information of a single instance of a given class. The element to be shown can be defined by using a "Data Binding". Let's now define the "Data Binding" property. Press the "Select" button next to "Data Binding" property to explore all the available classes. Choose the "Company" class. Then press the "OK" button to confirm.

The "Details" view component has by default a condition applied. This condition specifies which is the object instance to be shown. In this case, the condition considers the key of the "Company" class, that is the "oid" attribute [Key Condition].

Now in the "Display Attributes" property, you can select all the attributes of the class to display in the details of the selected company. Press on the "Select" button next to the "Display Attributes" property. Press the "Select All" button to select all attributes. Press the "OK" button to confirm.

In order to let the user select a company from the list and see its details, let's use the On Select Event with a "Navigation Flow". Add a "Flow" by selecting the "Navigation Flow" icon from the "Flows" section of the toolbar. Choose the "Navigation Flow", then click first on the "List" component and then on the "Details" Component. Type the name for the "Event", such as "Details". The "On Select" Event represents the user interaction allowing the company selection. The "Navigation Flow" states that when the user presses on element from the list the component targeted by the flow is executed. The user moves to the "Details" screen and sees the company details. The "Navigation Flow" also provides information to the "Details" component.
In this example, the company selected by the user is provided to the "Details" component to see the details. Double-click on the "Navigation Flow" to see the "Parameters Binding" dialog. To send the company selected by the user and show the details, bind the "oid" attribute with the "Key Condition".

How to Emulate the List & Details

Generate the project to emulate the mobile application. Press on the "Generate and Run" button to generate the "List & Details" mobile application. From the "CRM" section, you can run the application on the browser by pressing on the "Open Emulator" button.

Otherwise you can use the WebRatio Mobile Developer App and also scan the QR Code to run the Application on your device. Press on "Open Emulator" button to run the application on your PC. Wait for loading of the application. Finally, you can see the companies list in the emulator. Click on a Company to view its details in the second screen.