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 ways to model a search, each one addressing a specific user need. One way to model a search is to filter the result using a "keyword" field. In a CRM application, an example is a company search by keyword. In this lesson, you learn how to model a search by keyword in WebRatio Mobile Platform.
How to Model the "Search by Keyword"
We work on "CRM" mobile project. Let’s suppose you want to model a screen with a search by keyword pattern, where companies are filtered using the keyword field. We have already defined in the Domain Model the information representing a company 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 keyword field. Let's add a "Form" component. Select the "Form" view component from the "View Components" section of the toolbar, choose the "Form" view component and click inside the Screen to add the "Form" view component. Give a meaningful name for the Component to make it easier to recall the element’s purpose, for example "Search Companies by keyword".
The "Form" vomponent is a "View Component" consisting of "Fields" and "Selection Fields" that show an input form to the user.
Now, let's add the keyword field to the form. Right-click on the "Form" view component, choose the "Add" option and then the "Field" option. Type a meaningful name for the field, such as "keyword".
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.
To show the results of the companies search, let's use the "List" view component. Add a list by selecting the "List" view component from the "View Components" section of the toolbar and click inside the Screen to add it. Give a meaningful name for the "Companies Results" 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.
Let's now define the "Data Binding" property. Move to the Properties View, press the "Select" button next to the "Class" property, choose the "Company" class and press the "OK" button to confirm. 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 nationality and the address. Press the "Select" button next to the "Display Attributes" property and choose the desired attributes, for example the "Name", "Nationality" and "Address" attributes. Then press the "OK" button to confirm. 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 and choose the List's sorting, in this case choose the "Name" with ordered ascending. Then press the "OK" button to confirm.
Let’s suppose that the companies matching the searched keyword are those containing the keyword 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 keyword. 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" option and then "Attribute Condition" option. Type a name for the "Attribute Condition" a name, for example "Name contains keyword". Once you added the condition you need to specify which is the attribute of the company that must contain the keyword. Let's use the "Attributes" property for this purpose. Press the "Select" button next to the "Attributes" property, choose the "Name" attribute and press the "OK" button to confirm. We want to specify that the company name contains the provided keyword. 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 "Attribute Condition" option. Type a name for the attribute condition, such as "Nationality contains keyword". Press the "Select" button to choose the attribute to associate, choose the "Nationality" attribute and then press the "OK" button to confirm. 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" option and then "Attribute Condition" option. Type a name for the "Attribute Condition", such as "Address contains keyword". Press the "Select" button to choose the attribute to associate, choose the "Address" attribute and then press the "OK" button to confirm. 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 keyword is 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" list view component in the screen 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 an On Select Event with a "Navigation Flow". To add a navigation flow select the "Navigation Flow" icon from the "Flows" section of the toolbar, choose "Navigation Flow", click first on the "Form" view component and then on the "List" view 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 keyword field is 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 the "keyword" field with each attribute conditions an press the "OK" button to confirm.
How to Emulate the "Search by Keyword"
Generate the project to emulate the mobile application, using 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.
You see the search form. Insert a value for the search. To show the results, run the search, by pressing on the "Search" button to start the search procedure. In this screen you can see the results of the company search by keyword.