Type Ahead Text Control with Use case

By definition Type Ahead Text auto fills the text based on the selection service.

The toolkit provides features like Configurable items, Appearance, and behavior options etc. Lets discuss how it will goes by a sample use case.The sample image shows how Type ahead text behaves when you Type “Cal”

Click here to open in new window to have clear picture


Use Case: Lets have a two input text controls, one is “Name” and another is “Email”, i want to auto populate the Name field with the Users in a Team, If i select the name from the field the corresponding user email has populate in Email field, i want to make it Email field as Read Only, Because i don’t want to enter the user manually.

Click here to open in new window to have clear picture

Lets begin with Creation of Coach View

The Controls involved in a coach view are Service Call ( Get Users from Team), Type ahead Text ( populate user names from Team), Text ( auto populate user’s mail through script, it is basically read only ).

Lets focus on TypeAheadText Control Configuration and binding in coachview, Click here to know more about Type ahead Text. The variables name, nameFieldlabel is a configuration options which we can pass it by main coachview.

Click here to open in new window to have clear picture

The items will be populated from the Configuration tab, Lets configure ONLOAD, ONCHANGE events as shown in fig

Select Items from the service, bind service variable to Service name and events on ONLOAD and ONCHANGE, there we go for write Events in LOAD(event type).

Click here to open in new window to have clear picture


bpmext.ui.registerEventHandlingFunction(this,”eventON_LOAD”);
bpmext.ui.loadView(this);
bpmext.ui.substituteConfigOption(this, “serviceIn”);
bpmext.ui.substituteConfigOption(this, “serviceOut”);
this.getEmailAddress = $.proxy(function(data) {
var flag=this.context.options.inpFlag.get(“value”); // This flag is just an identity of a field from main coach.
console.log(“grpFlag –>”+data.getLabel()+”– name–>”+data.getData())
console.log(“email address invoked Build”)
var inp=flag+”|”+data.getData(); // Prepare input for the service to get Email address Ex: PE|pavan
this.ui.get(“Service_Call1”).execute(inp);
},this);

Lets focus on Service Call. Please go to Spark UI Controls section to learn in-depth knowledge.

We just focus on the configuration section & the service will return the value.

Service Call Configuration Behaviour tab.As shown in Below Fig.

Click here to open in new window to have clear picture

Attached AJAX Service will return’s the users from Team.

OnResult Event in Configuration is fired when the Service return values with out having any errors/exceptions in Service.

Well, the ajax service should be in specific variable types to function properly, change the parameter names/types does not work properly, attached the screen shot for the same.

Click here to open in new window to have clear picture


//The Server script of Ajax Service & onResult Event fired when Service Executes….

var splitArr=tw.local.data.split(“|”);
var grpFlag=splitArr[0];
var name=splitArr[1];
var groupName=””
if(grpFlag==”BUILD”){
groupName=”XXXXX Team”;
}else if(grpFlag==”TECH”){
groupName=”XXXXXX Team”;
}else if(grpFlag==”PE”){
groupName=”XXXXX Team”;
}else if(grpFlag==”SA”){
groupName=”XXXX Team”;
}

var team = null;
tw.local.results = new tw.object.listOf.String();

try {
team = tw.system.org.findTeamByID(groupName);
} catch(e) {
//do nothing
}
if(team == null) {
try {
team = tw.system.org.findTeamByName(groupName);
} catch(e) {
//do nothing
}
}
tw.local.results=””
if(team != null) {
var users = team.allUsers;
for ( var i = 0; i < users.length; i++ ) { var user = users[i]; if(user != null && user.name.lastIndexOf("@") > -1) {
// tw.local.results[i] = createNameValuePair(user.fullName, user.name);
if(user.fullName.toUpperCase() == name.toUpperCase()){
// tw.local.results = grpFlag+”|”+user.name;
tw.local.results = user.name;
break;
}
}
}
}

this.onResult = $.proxy(function(data) {
var result=data.getData(); // Get Service Output and store it in result variable.
var split=result.split(“|”); // This code is not necessary as part of another requirement Service output resulting concatenation with another String Example : CC||pavan@gmail.com
var flag=split[0]; // This return the flag, in this scenario ‘CC’
var email=split[1]; // stored the email in to the corresponding variable.
var emailField = this.ui.get(“Bootstrap_Row1/Bootstrap_2_Column2/emailAddress”); // get the object of emailAddress in coachview with object control id.
emailField.setData(result); // Set the result variable. Ex:’CC||pavan@gmail.com’
},this);

After Completion of Utility Coach view as specified. Lets integrate with main coachview.

The fig shows the configuration options from main coach view.

Click here to open in new window to have clear picture


// Service from main Coach view to load team members 🙂
var team = null;
tw.local.results = new tw.object.listOf.String();

try {
team = tw.system.org.findTeamByID(“XXXXX Team”);
} catch(e) {
//do nothing
}
if(team == null) {
try {
team = tw.system.org.findTeamByName(“XXXX Team”);
} catch(e) {
//do nothing
}
}
if(team != null) {
var users = team.allUsers;
for ( var i = 0; i < users.length; i++ ) { var user = users[i]; if(user != null && user.name.lastIndexOf("@") > -1 &&(user.name.toLowerCase().indexOf(tw.local.data.toLowerCase()) > -1 || user.fullName.toLowerCase().indexOf(tw.local.data.toLowerCase()) > -1)) {
// tw.local.results[i] = createNameValuePair(user.fullName, user.name);
tw.local.results.insertIntoList(tw.local.results.listLength,String(user.fullName));
}
}
}

I hope this will give clear picture in terms of use case, if anything put a comments, let us dig in deep !!
Thanks for stopping by……….

————

passphoto

About author

Pavan is a passionate bpm consultant and social media entrepreneur, and is frequently researching the latest trends in bpm design and new-age modelling ideas..

0 thoughts on “Type Ahead Text Control with Use case

Leave a Reply

Your email address will not be published. Required fields are marked *