How to Model Autocompletion

by Michela Frigerio
6,206 views Published on Nov 02, 2017
Applies to: 7.2 or higher
Table of contents


Autocompletion allows you to specify an information source to be used as a suggestion for the fill-in of a text field. In this way, the user can type only the initial letters of the word or of the value to be inserted in the field. The Web application shows different options from which the user can choose the desired one. You can see an example of the desired result in the following image.

Configuring Autocompletion

Autocompletion on the WebRatio Platform requires you to model additional elements representing the suggestion list. Suppose you have a page for an employee’s management with a “role” field. You want the user to see a list suggesting the available roles starting from what he or she writes in the “role” field. The resulting WebRatio model is shown in the following image.


The suggestion list is modeled as a standalone page containing a Simple List component for the “Role” class. Moreover, the simple list has a conditional expression applied that shows only the roles matching the starting letters written in the field along with the Max Result property set to 10 to limit the shown elements. A Navigation Flow represents the user interaction and brings the field value to the conditional expression.

Let’s now look at the steps required to activate autocompletion in the “role” field using the previous model.

  1. Select the “role” field of the Form Component.
  2. Move to the Properties View and select the “AJAX” tab.
  3. Activate the “Enable Autocompletion” property.
  4. Press the “Select” button next to the “Autocompletion Flow” property.
  5. Select the Navigation Flow connecting the Form Component and the Simple List
  6. Check the “Autocomplete Indicator” property so that the user sees an icon alerting  that autocompletion is working.

Note. Remember that if the Form Component containing the autocompletion field has a Validation Rule attached, then you must disable the “Validate” flag of the Navigation Flow used to retrieve the suggestion list. Otherwise, the event will not be triggered.

Once autocompletion is attached to the desired field, you have to change the appearance of the page containing the suggestion list.

  1. Select the "Roles Suggestion" page.
  2. Select the “Layout Tab” in the Properties View.
  3. Select the “Custom Grid” option in the Layout Manager property.
  4. Select "WRDefault/Autocomplete" as the Page Layout.

  1. Move to the “Layout View” and expand the “Location Overview” section.
  2. Select the "source" location and drag the “Roles” Simple List from the Pool in the location.

  1. Select the Simple List and choose the Layout Tab in the Properties View
  2. Select the "WRDefault/Autocomplete" Component Layout.

Note. Remember to set the Frame Layout property to “None” and to enable the “Ignore Master Page” property on the page if a master page is modeled in your site view.

Advanced feature: “Depending Autocompletion”

“Depending Autocompletion” is an advanced feature that triggers autocompletion only when some other fields of the form have a value. This is a way to filter the suggestion list present meaningful suggestions.

Suppose you use the model from the previous example and improve it to show only roles belonging to the selected department. What you need to do is to add an additional condition expressing the fact that the roles should belong to a specific department, and then pass the value of the “Department” field over the Navigation Flow.

To state that the autocompletion must not start until a department is selected, you need to:

  1. Select the “Role” field of the Form Component.
  2. Move to the Properties View and select the “AJAX” tab.
  3. Press the “Select” button next to  the “Depends On Field” property and choose the “Department” field.