Tuesday, May 26, 2009

Type Ahead (Auto Complete) in UI Webforms / Tables

Today I would like to share Matrixone's Type Ahead feature a feature very much similar to Google's Auto Complete.

The Type Ahead feature stores text values entered in form text fields, then displays the most recent entries the next time that the user enters that field. They can then select from the list rather than needing to type the complete value or use a chooser.

If the field uses a JPO:method, the functionality is slightly different. The field pops up the list of recently-entered values as described above. When the user types something that does not match any of those values and exceeds the character count setting, the JPO is triggered to return the list of matching values returned by the JPO method.

Below are the UI field settings:

· TypeAhead=true|false Enables type ahead. If not provided, automatically set to true. Typically used to disable type ahead for a field.
· TypeAhead Program—Name of the JPO called to retrieve a list of possible values. This JPO is called after the user types the specified number of characters. A JPO is typically used by fields that are normally populated using choosers.
· TypeAhead Function—The name of the JPO method used in conjunction with the TypeAhead Program setting.
· TypeAhead Character Count—Overrides the emxFramework.TypeAhead.RunProgram.CharacterCount system property. This setting may be useful for fields whose values may all contain the same prefix.
· TypeAhead Saved Values Limit—Overrides the emxFramework.TypeAhead.SavedValuesLimit system property

The configured TypeAhead program should extend emxTypeAhead and the function should have the below format

public String test(Context context, String[] args) {
String filter = args[0];

addValue("first", "hidden_first");
addValue("second", "hidden_second");
addValue("third", "hidden_third");
setAllDataSentAttribute(true);
return (toXML());
}

This Type Ahead feature is implemented using the Matrix Cue objects which are context specific just like the sets, so the stored / returned values are also specific to the context user. The number of values stored for each user per field depends on the value for the emxFramework.TypeAhead.SavedValuesLimit property in the emxSystem.properties file. The default is 10 unique values and can be overridden at the field level using the Type Ahead Saved Values Limit setting.

This Type Ahead feature can also be implemented in custom forms using framework’s tag library, please refer to the app dev guide for more details.

No comments:

Post a Comment