Type Ahead Text from List Sample in IBM BPM

Introduction

The Type Ahead Text control auto fills text based on the selection service attached to it. This control is most commonly used to auto fill selections and allows for faster input as well as error prevention. The Type Ahead Text control comes with many easy to configure items, appearance, and behavior options. In this article we are going to learn how to create a Type Ahead Text control and fill text based on the Static List Data.

Overview

The Type Ahead Text control auto fills text based on the selection service attached to it. A Type Ahead Text control provides the following configuration properties in Process Designer:

Like almost all controls, you can trigger events that are fired when the user interacts with the control. The following configuration options are available in Type Ahead Text control.

Ø  Items.

Ø  Appearance

Ø  Behavior

Items:

ü  Item Lookup Mode Start Empty, Items From Service, Items From List.  This must be specified, and used with the matching option chosen.

ü  Type-ahead Items Service AJAX type-ahead service. Will only be called if item lookup mode is set to items from service.

ü  Items List If not using a service, you can add your items here as shown below.

Appearance:

ü  Width Width in px, %, em; for example: 50px, 20%, 0.4em. If no unit is specified, px is assumed

ü  Size Style Default, Large, Small

ü  Label Placement Choose from drop-down list: Top or Left

Behavior:

ü  Tab Index Form control tabbing sequence index. Tab indices start at 1, and may be set sparsely.

ü  Label Placement Enter text you want the user to see to help them.

Implementation

Step 1: Create a Coach View called as ‘Type Ahead Text CV’ under Process App. Darg and drop a Type Ahead Text Control to Layout Section as shown below.

Step 2: Rename the Type Ahead Text control name as Country. Select à Properties à Configuration àExpand Item.

Select Items From List Option from Item Lookup Mode drop down.

Expand Items list and add the Items (Country names here) as shown below.

Step 3: Select à Properties à Configuration àBehavior and enter Placeholder text as ‘Start typing Country Name’. This text will show in text box to guide the user.

Step 4: Create a Client Side Human Service and name as ‘Test Type Ahead Text CHS’. Select Coach Section and select Coach. Drop Type Ahead Text CV control to Coach Section as shown below.

Step 5: Test the application. In Test Type Ahead Text CHS click on Run button which is in right corner. The page will open as shown below.

Step 6: Now start typing some country name in text box, this will retrieve the list of items which is matches with your entered letters. The result is as shown below. We can select the appropriate option from the list shown.

Conclusion

We have learnt how to use the Type Ahead Text control using Static List along with different configurations options. We will see how to use Service in Type Ahead Text control in coming articals. Keep eye on this site/follow for more future articals. 

Download

S. No	File Name	Size	Download
1	Type Ahead Text from List Sample in IBM BPM.pdf	1.6 MB	Download
2	BPM_UI_Samples - Type_Head_Text_v1.0.zip	10 MB	Download