Structured Search

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

The search function is the main way the user looks for content on an application. There are different way to model a search, each one addressing a specific user need. One way to model a search is to filter the result using many fields. The structure of the form depends on the searched information. In a CRM application, an example is a company search. In this lesson, you learn how to model a structured search 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

The search function is the main way the user looks for content on an application. There are different way to model a search, each one addressing a specific user need. One way to model a search is to filter the result using many fields. The structure of the form depends on the searched information. In a CRM application, an example is a company search. In this lesson, you learn how to model a structured search in WebRatio Mobile Platform.

How to Model the "Structured Search"

We work on "CRM" mobile project. Let’s suppose you want to model a screen with a company search providing three different fields: name, nationality and address.

We have already defined in the Domain Model the information representing a company and a country for the "CRM" mobile app. We have also already created the screen, where we are now going to model the search.

Let's start modeling the form containing the three fields for the search. Select the "Form" component from the "View Components" section of the toolbar and click inside the screen to add the component. Give a meaningful name to the component to make it easier to recall the element’s purpose, for example "Search Companies".

The "Form" Component is a "View Component" consisting of "Fields" and "Selection Fields" that show an input form to the user.

Let's add the three fields: name, nationality and address. Right-click on the "Form" view component to add a "Field", choose the "Add" option and then choose the "Field" option. The field will be shown as a child of the "Form Component" inside the Outline View. Type a meaningful name for the "Field", for example "Name".

A "Field" is a "View Component Part" allowing free input from the user. It can be typed and this information is used to automatically validate the value provided by the user.

This procedure must be repeated for the "Address" field. Right-click on the "Form" view component to add another field, choose the "Add" option and then choose the "Field" option. Type a name for the field, such as "Address".

We want the nationality field to be a dropdown containing the country list. The user can then choose one country from the list. We must use a different field type for this purpose.

Let's add a "Selection Field" to the "Form" view component. Right-click on the "Form" view component to add a selection field, choose the "Add" and then choose the "Selection Field" option. Type a name for the selection field, for example "Nationality".

A "Selection Field" is a "View Component Part" allowing the user to choose a value by a dropdown menu. It must be preloaded with the definition of the available options list.

We want to provide the selection field with the list of countries stored in the "Country" class. Let's add the "Selector" component. Select a "Selector" component from the toolbar and click inside the screen to add the component.

The "Selector" component is the most-used "View Component" for retrieving the options list. for a selection field. In this example, we need to retrieve the list of countries.

Let's now define the "Data Binding" property. In the Properties View, press the "Select" button next to "Data Binding" property to associate a class, choose the "Country" class and then press the "OK" button. Let's suppose that we want the list to be sorted alphabetically by country name. We can use the "Sort Attributes" property for this purpose. Press the "Sort" button next to "Sort Attributes" property to choose the List's sorting, in this case choose the "Name" with ordered ascending and then press the "OK" button.

Let's use the "Selector" component to pass the country list and preload the selection field. We use a "Data Flow" for this purpose. Select a "Data Flow" in the "Flows" section of the toolbar to connect the "Selector" component and the "Form" component.

The "Data Flow" serves the sole purpose of transporting parameter values. In this case, it must provide the country list to the "Form" component. Double-click on the "Data Flow" to see the "Parameters Binding" dialog. Uncheck the "Enable Default Binding" property.

The selection field has two slots by default. The "Label" slot contains the information shown to the user for each option (e.g., country name). The "Output" slot contains the information used by the application to run the search (e.g., country name).

Let's bind the two information. Bind the "Name" attribute with the output of the "Selection Field" and press the "OK" button.

To show the results of the companies search, let's use the "List" view component. To add a it to the screen, select the "List" component from the "View Components" section of the toolbar and click inside the screen. Give a meaningful name for the component, such as "Companies Results".

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.

In the "Search Companies" pattern, the "List" view component displays the results list of the search. Let's now define the "Data Binding" property. In the "Properties View", press the "Select" button next to "Data Binding" property to associate a class, in this case choose the "Company" class and 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, choose the desired attributes, in this case the company name, the nationality and address and 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, to choose the List's sorting, in this case choose the "Name" with ordered ascending and press the "OK" button.

Let’s suppose that the companies matching the searched fields are those containing the corresponding field in the "Name", "Nationality" or "Address" attributes. We need then to apply a filter on the list showing the results. The filter has a condition for each attribute that can contain the corresponding field.

Let's add an "Attribute Condition" to the "List" view component. Right-click on the "Companies Results" component to add an "Attribute Condition", choose the "Add" and then choose the "Attributes Condition" option.

The "Attribute Condition" will be shown as a child of the "Conditional Expression" of the "List" component inside the Outline View.

Type a name for the "Attribute Condition", for example "Name". Once you added the condition you need to specify which is the attribute of the company that must contain the field. Let's use the "Attributes" property for this purpose. Press the "Select" button next to the "Attributes" property, to choose the attribute to associate, in this case choose the "Name" Attribute and then press the "OK" button. We want to specify that the company name contains the provided field. Let's set the "Predicate" property to "CONTAINS". To evaluate the predicate by ignoring the case sensitivity of the provided value, check the "Ignore Case" property. We want the list to show all the results when no keyword is provided. For this purpose we have to specify that the conditions of the filter are not mandatory. Let's set the "Required" property to "False".

The procedure shown for the "Name" attribute must be repeated for the "Nationality" and the "Address" attributes. Right-click on the "Companies Results" Component to add an "Attribute Condition", choose the "Add" and then "Attributes Condition" option. Type a name for the Attribute Condition, such as "Nationality". Press the "Select" button to choose the attribute to associate, in this case choose the "Nationality" Attribute and then press the "OK" button. Set the "CONTAINS" value as Predicate. Check the "Ignore Case" property. Set the "False" value for the "Required" property.

Right-click on the "Companies Results" Component to add an Attribute Condition, choose the "Add" and then "Attributes Condition" option. Type a name for the Attribute Condition, such as "Address". Press the "Select" button to choose the attribute to associate, in this case choose the "Address" Attribute and then press the "OK" button. Set the "Contains" value as Predicate. Check the "Ignore Case" property. Set the "False" value for the "Required" property.

The three conditions we modeled are evaluated by default using the AND operator. We want to see a company in the result list when the fields are contained in the name OR in the nationality OR in the address. Let's change the default operator to OR to meet this requirement. Select the "Companies Results" Component in the work area and move to the Outline View, select the "Conditional Expression" and move to the Properties View. Set the "Or" value as "Boolean Operator".

In order to let the user trigger the search, let's use a Select Event with a "Navigation Flow". Select the "Navigation Flow" in the "Flows" section of the toolbar, click first on the "Form" component and then on the "List" component. Type a name for the "Event", such as "Search".

The On Select event represents the user interaction allowing the submit of a form and it is shown as a button in the user interface. The "Navigation Flow" states that when the user presses the button to run the search the component targeted by the flow is executed.

The "Navigation Flow" also provides information to the "List" component. In this example, the value filled in by the user in the fields are provided to the "List" component to evaluate the conditions applied to the list. Double-click on the "Navigation Flow" to see the "Parameters Binding" dialog. Uncheck the "Enable Default Binding" property. To send the value provided by the user and run the search, bind each field with each "Attribute Condition", by using the "Guess Binding" button for the "Field" items and the "Output Parameters" that have the same name and then press the "OK" button.

How to Emulate the "Structured Search"

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 see the search form. For example choose an option for the "Nationality" dropdown.

To show the results, run the search. Press on the "Search" button to start the search procedure. In this screen you can see the results of the company structured search.