How to Model the Alphabetical Index

by Piero Fraternali
23,503 views Published on Apr 09, 2014
Applies to: 7.2 or higher
Table of contents

In many applications, such as corporate intranets or CRM, the user may need to access the archive of all registered people, and that archive may be very large. One way to support this requirement is by offering a search form, which however assumes that the user knows at least some information about the search object, for example the surname of the desired person. When the objects possess a meaningful attribute that allows sorting them alphabetically, the alphabetical filter pattern can be used as an alternative or a complement to a form-based search.

The idea is to use the list of all the alphabetic characters as a kind of index, and then to partition the whole collection of objects into smaller groups. Each group contains exactly those objects for which the value of a given property (e.g., the “surname” attribute) starts with the selected letter.

In this way, the user can jump to a given group of objects and effectively scroll through the archive, quickly locating the desired object.

Figure 1 shows an example of the IFML model and of the resulting user interface; in a CRM application, the list of employees is divided into groups, using the first letter of the surname as the split criterion.

    Figure 1: Example of an alphabetical filter

This simple pattern can be improved, by making the alphabetic filter display the number of objects in each group.

Figure 2 shows the improved IFML pattern, which exploits a DynamicBehavior content binding: the invocation of the “getGroupCountsBySurname()” method of class Employee returns a collection of objects of type GroupCount, each containing the group name (i.e., one alphabetic character) and the count of objects belonging to the group. The objects returned by the method call are used to construct the list of alphabetical letters and object counts displayed in the alphabetical filter.

Figure 2: Example of an alphabetical filter with object count

In WebRatio, we can model both IFML examples, but we show only the second, which is more interesting.

The creation of an alphabetical filter pattern is very simple, thanks to a powerful View Element, the Alphabet View Component. The Alphabet View Component includes the functionality for showing the list of alphabetical characters and for counting the objects of a group; it displays the list of alphabetical letters with the count of the objects associated to each.  

The Alphabet View Component has the following associated properties:

  • “Entity”, which must be set to the entity that provides the instances to be shown
  •  “Attribute” denoting the property to use for grouping the objects alphabetically
  • Special Characters”, if the entity is not specified, defines the string of special characters to provide as output
  • “User Numbers” , if checked, instances starting with numbers are considered

The properties "Entity" and "Attribute" are not mandatory; if they aren’t set the Alphabetical View Component will be static and will not depend on any value.

 To edit the pattern in WebRatio, follow these steps:

  • Create a page, for example named Employees List
  • Add an Alphabet View Component, for example named Alphabetical Filter and set the properties to associate the Employee entity. Figure 3 shows how to set these properties in our example.

Figure 3: Setting the properties of the alphabet View Component

  • To make the alphabetical index selectable so that it shows the group of objects that are associated to a letter, insert into the page a Simple List View Component, defined on the same entity as the Alphabet View Component. The Display Attributes of the Simple List View Component should comprise the attribute used for grouping, plus any other attribute deemed useful to provide a concise view of the objects in the group (e.g., the firstname and lastname attributes used in our example).

Figure 4: Setting the properties of the List ViewComponent to show the first name and last name of contacts in  group

  • To define the grouping criterion, you must add a Conditional Expression to the Employees Simple List View Component, which selects the instances with the lastName beginning with a letter provided as an input parameter. Figure 5 shows the definition of the Conditional Expression, which evaluates the predicate BeginsWith() over the lastName attribute of each contact, using an input parameter denoting the selected letter.

Figure 5: Creating the Conditional Expression for selecting the objects in a group

  • Next, to actually make each letter selectable and thus display the group of objects associated with it, you must create a Normal Flow from the Alphabet View Component to the Employees Simple List View Component, as shown in Figure 7. The Normal Flow is associated with a Parameter Binding, shown in Figure 6.

Figure 6: ParameterBinding that provides the selected letter in input to the Employees List ViewComponent

  • The result is shown in Figure 7.

             Figure 7: Alphabetical filter pattern in WebRatio

To see your page, right-click on the page in the site view and select the Generate -> Generate Selection option from the context menu. Check the result on the web browser where the result should be something like the following in Figure 8.

                                     Figure 8: Result of generating the code for the Alphabetical Filter design pattern