Easing data entry for Web Form users

• Download source code - 29.5 KB

Motivation

A DropDownList control is quite a common occurrence in many web forms. It provides a wonderful mechanism to control user input by standardizing the inputs, a convenience for not having to type in the input, and a blessing for a developer to map a reference to a displayed text, to implement business functionality. Quite often though, it so happens that the number of choices that a user can make from, are far too many than those she has use for. For example, an enterprise might have many departments configured in an application, but any particular user might only need to work with one or two departments. Or, while entering time in a time tracking application, the tasks defined in the application would be for too many than those required by any individual. Or, while making requests for human resources, the technology skills sought would usually be a small fraction of those that are defined in an application. Thus, on an average, a user sees items listed for which she has no use for.

It is a definite irritant for the user to wade though a list of choices she has no interest for. Another irritant is that the real estate on the screen is unnecessarily used up, obscuring other inputs the user has already made. Thus came about the idea to create a Web Control which would track a user's selection pattern, during a session or while using an application, and displays a configured number of list items, or items that are used during a session. And, we have the UsageBasedDropDownList control. I wanted to call it the SmartDropDownList, but desisted. You will notice that it is exactly what it is. Smart.

Normal Usage

A user of your web form does nothing different. He picks an item from the displayed list. When a user selects an item from the drop down control, it will maintain the usage statistics of the selected list item and rearrange the displayed list items in a descending order of usage. The user normally sees a subset of the defined list items. The page developer/designer configures the number of items that the control should display, which is called the suggested optimal list item count. That is, if a UsageBasedDropDownList control is initialized to contain 20 items, and the suggested optimal count is 4, initially, the control will start by displaying 4 items, the first four from its initialization list and a developer provided property for fetching the other list items. This property has a default value of 'More…', but it can be anything the developer prefers. If, at any time, the number of used items in the list is less than 4 (the suggested optimal count), the control will display up to 4 items (a couple of items displayed could have zero usage). On the other hand, if the usage of items grows beyond 4 (the suggested optimal count), the control will display all items that have a usage count that is greater than zero.

Examples

Assume that the drop down control has a total of 10 list items that it can display, and is configured to display 3 most used list items.

Initial Display

When the drop down control is initialized, it will display 'item-1', 'item-2', item-3', and 'More…', since there are no usage statistics and the display order is the definition order of the list item collection.

Initial Selection

Some More Usage

The general behavior will be to display the most used list item at the top of the drop down list, followed by lesser used items, but limited to the configured number for list items to be displayed. For example, after some time, the list items have a usage statistics like:

However, in cases where the usage of the list items is spread out evenly amongst the available items, the UsageBasedDropDown control does display all items that have a usage count greater than zero, within an individual user session or in an application, depending on how the control is 'scoped'. Essentially, unused items are not displayed, unless the user specifically requests for them.

Developer Features

Almost all of the behavioral traits of the UsageBasedDropDown control mirrors that of the standard DropDownList server control. In fact, the UsageBasedDropDown control extends the DropDownList control, to enhance its behavior. Described below are the new properties and methods for the UsageBasedDropDownList control, with which a developer can achieve the increased functionality.

ModelId

The ModelId is a property which the developer sets either declaratively, programmatically, or through the property browser window of Visual Studio. The DropDownList web control has a captive list item collection which it uses to build the HTML option elements of the containing HTML select element. Since the UsageBasedDropDownList control works on the principle of sharing its model within a defined scope, the developer must exercise care to provide unique identifiers. For example, if in a website, several web forms contain drop down lists for users to identify enterprise departments while providing inputs for business actions, the list of departments would be the same within the enterprise. While different users would have interest in different departments, any single user would have interest in a sub-set of the departments. If the model for the UsageBasedDropDownList is scoped accordingly, to be limited to a user session state, every instance of the control can reference the same model in that session state object. So, when each of the UsageBasedDropDownList controls access the model as Session("Departments"), the same object is referenced.

Note: if the developer chooses to provide different IDs for the models within a defined scope (Session or Application), the UsageBasedDropDownList would create separate models, albeit with the same information.

ListSize

The ListSize is a property which the developer sets either declaratively, programmatically, or through the property browser window of Visual Studio. This is the suggested optimal list size which decides the number of list items that must be displayed in the drop down of the control. The UsagebasedDropDownList will, however, display all list items that have a usage count that is greater than zero, irrespective of the ListSize.

Scope

The Scope is a property which the developer sets either declaratively, programmatically, or through the property browser window of Visual Studio. This property determines the access scope of the model for the control. It can either be session based or application based. Scope the model to be session based if you want to track and control individual user usage patterns. Scope the model to application based if you want to track and control all users of an application.

Note: The control checks for the existence of the model in the specified scope before it initializes the model. Remember to provide identical ModelId for controls that share the same information within a scope.

Note: The developer must ensure that the session state is managed appropriately, particularly when a user's session expires. The control assumes that the user session is re-created.

ShowAllItemsText

The ShowAllItemsText is a property which the developer sets either declaratively, programmatically, or through the property browser window of Visual Studio. The motivation behind the development of this web control is to limit the number of items displayed by the drop down list to those that are of interest to a user. Therefore, the likelihood of there being list items that are of interest, but not currently displayed, is high. A list item with a text like "More…" provides sufficient information to the user that more items exist and can be displayed. One of the enhanced behaviors of the control is to fetch all of the list items from the model and populate the drop down list when the user selects "More…".

Items

The Items property of the DropDownList is overridden, and is available as a read-only property. It returns a ListItemCollection object. The UsageBasedDropDown control, currently, does not provide the feature to list all items declaratively or through the design window of Visual Studio. The list items can only be set in a programmed fashion.

Note: the reasoning behind this limitation is that, in an application, many pages would host the UsageBasedDropDown control, which share the same information. The first time any of these controls are accessed through a web page, it builds the model in the defined scope, after checking for the existence of the model. And, there is no telling which page would be accessed first.

AutoPostBack

The AutoPostBack is a property of the DropDownList web control which posts the containing form back to the server each time the selected item in the DropDownList is selected. The UsageBasedDropDownList web control directly supports this feature. When this property is set to 'true', the control traps the SelectedIndexChanged event to update the usage statistics, and bubbles up the event for the containing page, so that the developer can code application-specific functionality. Normally, this event is used to populate dependant controls in the page. In case the AutoPostBack property is set to 'false', the UsageBasedDropdownList web control dynamically inserts a client-side JavaScript code to force a post back when the user selects the ShowAllItemsText("More…") in order to fetch all the items in the model.

Initialization

The UsageBasedDropDownList web control will accept a ListItemCollection as its input. This list should contain all possible values that are to be displayed in the drop down. Initially, the drop down control will display a configured number of list items, based on the order defined by the ListItemCollection.

In addition to the configured number of list items, the drop down control will also display a list item 'More…', indicating to the user that there are more elements, if he/she wishes to view them. If the user selects the list item named 'More…', the drop down control will show all the items in the model, and will not display the 'More…' list item.

The ASP.NET engine initializes the requested page and the controls contained in the Controls collection of the page, each time the page is requested. Since the model for a set of UsageBasedDropDownList controls is shared, based on the 'Scope' property, each instance of the web control checks for the existence of the model before it builds the model. This control checks for the instance of the model based on the ModelId property. If you wish different instances of the web control to contain the same list items, you must ensure that you initialize each instance with the same ModelId.