Search Pattern

IFML Modeling with WebRatio Platform
207 views Published on Apr 09, 2014 | Time 30 min
Applies to: 7.2 or higher

Using the search function is the main way the user looks for content on an application. For this reason it's important to know the best practices for modeling an efficient search with IFML and WebRatio Platform. WebRatio Platform provides you with a predefined set of "View Components" that you can use to model a web search. Of course there are a variety of search strategies. In this lesson, you learn how to model the best design pattern for obtaining a "Single Field Search" and a "Structured Search".

Transcript

Table of contents

Search Pattern

There are different search patterns, each one addressing a specific user need. The basic patterns we are going to see are: "Single Field Search" and "Structured Search". In a "Single Field Search" the user has a "keyword" field; the "keyword" is then used to filter the results. In a "CRM" Web application, an example of a single field search is searching for companies by keyword. In the "Structured Search", the user has many fields that can be used to search for content. The structure of the form depends on the searched information. In a "CRM" Web application, an example of a structured search is "Searching for Company" by "name", "address" and "nationality". The page of the search pattern is composed of two main "View Components": the "Form" component and the "List" component. Before going on with an explanation of the "View Components" used in this pattern, please review the following lessons. The "Form" component is configured to contain the fields necessary to let the user enter the information in order to execute the search. The "List" view component is configured with a "Conditional Expression" defining all the conditions required by the search. The two "View Components" are connected through a "Navigation Flow", which is usually the "Search" button on the user interface. In the "Search Pattern" the "Navigation Flow" also has the aim of providing the input field values to the "Conditional Expression" of the "List View Components". Let’s see specific models for the two basic patterns. Click on one pattern to learn how to create the model.

How to Model the "Search Companies by keyword"

Let’s suppose you want to model the "Search for Companies by keyword" page. For this example, we will continue working with our "CRM" web project. We have already created the "Domain Model" containing the "Company" entity and the "Sales Manager" site view. In the "Sales Manager" site view, we have already created the "Companies" area and the "Search Companies by keyword" page, where we are now going to model the search.

Let's start by adding the "Form" with the "keyword" field to the Page. To add a "Form Component" to the Page, select the "Form" component from the "View Components" section of the toolbar and click inside the Page. Give a meaningful name to the Component to make it easier to recall the element's purpose, for example "Search Companies by keyword".

To add the "keyword" Field, right-click on the "Form" component, choose "Add" and then "Field" option. The field will be shown as a child of the "Form" component inside the Outline View. Move to the Properties View to configure the field. Type a meaningful name for the field, such as "keyword", and choose the data type for the field by selecting an option in the "Type" dropdown list. In our example, let's select the "string" option. By default the "Form" structure can be seen only in the Outline View.

If you want to display form structure on the "Form" component figure, select the "Search Companies by keyword" component in the Page and go to its "Properties View". Then select the "Appearance" tab and check "Show All Parts" property. As a result, you should see the "keyword" field inside a white rectangle in the "Form" figure.

Now let's add the results list. To add a "List" component to the Page, select the "List" component from the "View Components" section of the toolbar and click inside the Page and name it "Companies Results". Let's now define the "Data Binding" of the "List" component. Select the "Companies Results" component, move to the Properties View and choose the "General" tab. Click the "Select" button next to the "Entity" property and choose the "Company" Entity. Click the "OK" button to confirm. Now let's choose the display attributes for your "List": click the "Select" button next to the "Display Attributes" property and choose, for example, the "Name", "Nationality" and "Address" attributes. Click the "OK" button to confirm. Choose the desired "Sort Attributes" for the list by pressing the "Sort" button next to the "Sort Attributes" property. For example, let’s choose the "Name" with ordered ascending. Let's suppose that the companies matching the "keyword" are those containing the "keyword" in the "name", the "nationality" or the "address".

To model this requirement we need to add to the "List" component a "Conditional Expression" composed of three different "Attribute Conditions", one for each attribute we want to check. To add an "Attribute Condition", right-click on the "Companies Results" component, and choose the "Add" and then "Attribute Condition" option. The "Attribute Condition" will be shown as a child of the "Conditional Expression" of the "List Component" inside the "Outline View". Move to the "Properties View" and give to the "Attribute Condition" a name, for example "Name contains keyword". Let's choose the attribute to which the condition refers. Press the "Select" button next to the "Attributes" property and select the "Name" attribute. We want the "keyword" field to be searched within the attribute value, so let’s choose the "Contains" predicate and then check the "Ignore Case" property. Finally, set the "Required" property as "False" so that when no value is found for the condition, the condition is simply ignored. This procedure must be repeated for the other two attributes that we have chosen to filter: "Nationality" and "Address".

Since we want a company to be contained in the results, if the keyword is contained in at least one of the attributes, we have to change the operator combining the conditions, which is the "And" operator by default. Select the "Companies Results" list component in the "Page", move to the Outline View and select the "Conditional Expression". Then move to the Properties View and change the "Boolean Operator" property to "Or".

In order to let the user trigger the search and have the field value pass to the "Conditional Expression", let's use a "Navigation Flow". To add a "Navigation Flow" select the "Flow" icon from the "Flows" section of the toolbar and click first on the "Form" component and then on the "List" component. Then select the "Flow" in the Page, move to the Properties View and name it "Search". To define the "Parameters Binding" between the "Form" Component and the "List" component double-click on the "Navigation Flow". Uncheck the "Enable Default Binding" property and bind the "keyword" field with the "Name contains keyword", "Nationality contains keyword" and "Address contains keyword" attribute conditions.

How to Model the "Search Companies"

Let’s suppose for a "CRM" Web application you want to model a "Company Search" using the "name", the "nationality" and the "address" as search criteria. We have already created this, in the "Sales Manager" site view the "Companies" area and the "Search Companies" page, where we are now going to model the search. We have also the Domain Model containing the "Company" and the "Country" entities.

Let's start by adding to the Page, the "Form" with three fields. To add a "Form" Component to the "Page", select the "Form" component from the "View Components" section of the toolbar and click inside the Page. Give a meaningful name to the Component to make it easier to recall the element's purpose, for example "Search Companies". To add the field, right-click on the "Form" component, choose "Add" and then the "Field" option. The field will be shown as a child of the "Form" component inside the Outline View. Move to the Properties View to configure the "Field". Type a meaningful name for the "Field", for example "Name", and choose the data type for the "Field" by selecting an option in the "Type" dropdown list. In our example, let’s select the "string" option.

If you want to display the "Fields Structure" on the "Form" component, select the "Search Companies" component and move to its Properties View, select the "Appearance" tab and check "Show All Parts" property.

The same procedure can be used for the "Address" field.

For the "Nationality" field, suppose that the countries list is stored inside an Entity. We want to use this Entity (named "Country" ) to load a dropdown menu to allow the user to choose a country from the available list. In this case, we need to add a "Selection Field". To add a "Selection Field" right-click on the "Form" Component in the Page, choose "Add" and then "Selection Field" option. Move to the Properties View and give a name to the "Selection Field", for example "Nationality"; then choose the data type for the "Selection Field". Let’s select the "string" option.

Now we need to provide the options list to the "Selection Field". You can use a "View Component" and a "Data Flow" to retrieve the options list and pass it to the "Selection Field". The most-used "View Component" for retrieving the options list is the "Selector" Component. Select the "Selector" Component from the "Utility Components" section of the toolbar and place it inside the Page. Give it a meaningful name, for example "Countries"; then move to the Properties View and choose the "General" tab. Press the "Select" button next to the "Entity" property and choose the "Country" Entity, then press the "OK" button to confirm. To sort the list, press the "Sort" button of the "Sort Attributes" property and select "ascending" for the "Name" attribute by clicking on the "Order" field in the dialog.

Now you need to preload the "Selection Field", so add a "Data Flow" connecting the "Selector" component and the "Form" component. Double-click on it to open the "Parameters Binding" dialog and then uncheck the "Enable Default Binding" property. On the right side of the dialog you can see three different input parameters referring to the "Nationality" Selection Field. To preload the option list, we use the two input parameters named "Nationality[label]" and "Nationality[output]". Bind the "Name" Attribute of the "Country" with the label of the "Selection Field", and the "oid" key attribute with the output. Press the "OK" button to confirm your choice.

Now let's add the results list. To add a "List" component to the Page, select the "List" component from the "View Components" section of the toolbar. Click inside the Page and name it "Companies Results". Let's now define the "Data Binding" of the "List" component. Select the "Companies Results" component and move to the Properties View. Click the "Select" button next to the "Entity" property and choose the "Company" Entity. Click the "OK" button to confirm. Now let's choose the display attributes for your "List". Click the "Select" button next to the "Display Attributes" property and choose, for example, the "Name", "Nationality" and "Address" attributes. Click the "OK" button to confirm. Choose the desired "Sort Attributes" for the list by pressing the "Sort" button next to the "Sort Attributes" property. For example, let’s choose the "Name" with ordered "ascending". Click the "OK" button to confirm.

Let’s suppose that the companies matching the fields are those that contain the corresponding Field in the "name", in the "nationality" or in the "address". To model this requirement, we need to add to the "List" component a "Conditional Expression" composed of three different "Attribute Conditions", one for each attribute we want to check. To add an "Attribute Condition", right-click on the "Companies Results" Component choose the "Add" and then "Attribute Condition" option. The “Attribute Condition” will be shown as a child of the "Conditional Expression" of the "List" Component inside the Outline View. Move to the Properties View and give a name to the "Attribute Condition", for example "Name". Let’s choose the attribute to which the condition refers. Press the "Select" button next to the "Attributes" property and select the "Name" attribute. Click the "OK" button to confirm.

We want the specific field to be searched within the attribute value, so let’s choose "Contains" "Predicate" and then check the "Ignore Case" property. At last, set the "Required" property as "False", in this way when no value is found for the condition, the condition is simply ignored. This procedure must be repeated for the other two attributes that we have chosen to filter: "Nationality" and "Address".

Since we want a company to be contained in the results if the fields have references at least in one of the attributes, we have to change the operator combining the conditions, which is the "AND" operator by default. Select the "Companies Results" list component in the "Page", move to the Outline View and select the "Conditional Expression". Then move to the Properties View and change the "Boolean Operator" property to "Or".

In order to let the user trigger the search and have the field value pass to "Conditional Expression" let's use a "Navigation Flow". To add a "Navigation Flow", select the "Flow" icon from "Flows" section of the toolbar and click first on the "Form Component" and then on the "List Component". Then select the "Flow" in the Page, move to the Properties View and name it "Search". To define the "Parameters Binding" between the "Form Component" and the "List Component" double-click on the "Navigation Flow". Uncheck the "Enable Default Binding" property and bind the fields with the "Name", "Nationality" and "Address" Attribute Condition to which they refer. Press the "OK" button to confirm your choice.

Complex Conditional Expression

In both examples all the conditions composing the "Conditional Expression" were combined using a "Unique Logic Operator" (AND or OR). In some cases, you need to create a "Conditional Expression" that combines the conditions using both operators, which makes a "Complex Expression". For example let’s suppose you want to model a "Product Search" Page allowing the user to provide price ranges. The "Conditional Expression" of the "Products Results" List that we want to obtain is to evaluate individually the two ranges independently of each other. In this way, if one of the two ranges is empty, the list is filtered by the other range.

How to Model the "Search Products"

Let’s suppose that you want to model the "Search Products" by having two ranges of prices for the search fields. For this form example, we will continue working with our "CRM" web project. We have already created the Domain Model containing the "Product" Entity and the "Sales Manager" Site View. In the "Sales Manager" site view, we have already created the "Products" area and the "Search Products" page, where we are now going to model the search.

Let's start by adding to the Page, the "Form" with the four fields that compose the two ranges. To add a "Form Component" to the "Page", select the "Form" component from the "View Components" section of the toolbar and click inside the page. Give a meaningful name to component to make it easier to recall the element’s purpose, for example "Search Products".

To add the range fields, right-click on the "Form" component and choose the "Edit Form.." option. Now that the "Edit View Component" dialog is open, let’s add the fields for the range. Press the "Add Field" button, give it a name such as "Range 1 - from" and change the "Type" to "decimal". In the same way, add the fields "Range 1 - to", "Range 2 - from" and "Range 2 - to". When you finish inserting the fields, press the "OK" button to confirm.

If you want to display form structure on the "Form" component, select the "Search Products" component and move to the Properties View, select the "Appearance" tab and check "Show All Parts" property. As a result, you should see the fields inside a white rectangle in the form figure.

Now let's add the results list. To add a "List" component to a Page, select the "List Component" from the "View Components" section of the toolbar and click inside the Page and name it "Products Results". Let's now define the "Data Binding" of the "List" component. Move to the Properties View and choose the "General" tab. Click the "Select" button next to the "Entity" property and choose the "Product" entity. Click the "OK" button to confirm. Now let’s choose the Display Attributes of our "List": click the "Select" button next to the "Display Attributes" property and choose, for example, the "Name" and "Price" attributes. Click the "OK" button to confirm. Choose the desired "Sort Attributes" for the list by clicking the "Sort" button of the "Sort Attributes" property. For example, let’s choose the "Name" with the "Order" property set to "ascending". Click the "OK" button to confirm.

Let's suppose that the products matching the ranges are those that contain the corresponding fields in the price range. To model this requirement, we need to add to the "List" component a "Conditional Expression" composed of four different "Attribute Conditions", two for each range we want to check. To add an "Attribute Condition", right-click on the "Products Results" Component and choose "Add" and then the "Attribute Condition" option. The "Attribute Condition" will be shown as a child of the "Conditional Expression" of the "List" component inside the Outline View. Move to the "Properties View" and give a name to the "Attribute Condition", for example "Range 1 - from". Let’s choose the attribute to which the range refers. Press the "Select" button next to the "Attributes" property and select the "Price" attribute. Click the "OK" button to confirm. We want the specific field to be searched within a range starting with the value of this field, so let’s choose the "Greater Than" predicate. Now let's add the "Attribute Condition" for the second part of the range. Right-click on the "Products Results" component, choose the "Add" and then "Attribute Condition" and name it, for example, "Range 1 - to". Move to the Properties View to configure the condition, press the "Select" button next the "Attributes" property and select the "Price" attribute. Click the "OK" button to confirm. We want the specific field to be searched within a range ending with the value of this field, so let’s choose the "Less Than" Predicate. This procedure must be repeated for the other two fields of the second range, "Range 2 - from" and "Range 2 - to".

In order to let the user trigger the search and have the field value pass to the "Conditional Expression" let's use a "Navigation Flow". To add a "Navigation Flow" select the "Flow" icon from "Flows" section of the toolbar and click first on the "Form" Component and then on the "List" component. Then select the "Flow" in the Page, move to the Properties View and named it "Search". To define the "Parameters Binding" between the "Form" component and the "List" component double-click on the "Navigation Flow". Uncheck the "Enable Default Binding" property and associate the field with the "Attribute Conditions" that have the same name. For example, "Range 1 - from" to "Range 1 - from". Click the "OK" button to confirm.

How to obtain the Complex Conditional Expression

Since we want a product to be contained in the results if the price is within at least one of the ranges, we have to change the "Conditional Expression" of the "Products Results" list. To modify the "Conditional Expression", select the "Products Results" component in the Page and move to the Outline View. Expand the node related to the "List" component and select the "Conditional Expression".

Let's move to the Properties View and press the "Edit" button next to the "Expression" property. Now we can change the expression by clicking the "Explicit the current expression" button represented by a yellow arrow pointing down. In order to evaluate the two ranges independently of each other, first we need to divide the two ranges by adding brackets. To add the brackets, select the expressions that belong to the same range. You can do that by pressing the "CTRL" key (on a PC) or the "CMD" key (on a mac) while selecting "Range 1 - from", "AND" operator and "Range 1 - to" and press the "Brackets" button. The same procedure can be repeated for the other range. To render the results of the two ranges independent of each other, you need to change the default operator "AND" between the two ranges with the value "OR". Press "OK" to confirm the expression.