Hello All,
In Siebel Dropdown fields (LOV) we have option to enter some Letter and related Option are shown in Dropdown, as shown in below image.
But in Normal Text Fields we have to enter the complete information there is no option of auto-complete.
We can extend the Option for auto fill for normal text fields also by the below mentioned Method.
In Siebel Dropdown fields (LOV) we have option to enter some Letter and related Option are shown in Dropdown, as shown in below image.
But in Normal Text Fields we have to enter the complete information there is no option of auto-complete.
We can extend the Option for auto fill for normal text fields also by the below mentioned Method.
- We need to use a 3rd party Plugin that Offers Auto Complete option
- I am using file from TypeAhead, http://twitter.github.io/typeahead.js/
- Include the file in Our PR file
- Call Method in PR file
- We can either retrieve the Option from Fixed set of value as in this example or From a file (.txt) or at run-time by querying Database (will take this in further articles)
Sample PR Code
you can download typeahead.js file and PR file from here
PR File : https://drive.google.com/open?id=0B52024rQ9Hc0NXQxWTR1TEtUbzg
JS file : https://drive.google.com/open?id=0B52024rQ9Hc0LURFbTQ1aDNiTzg
you can download typeahead.js file and PR file from here
PR File : https://drive.google.com/open?id=0B52024rQ9Hc0NXQxWTR1TEtUbzg
JS file : https://drive.google.com/open?id=0B52024rQ9Hc0LURFbTQ1aDNiTzg
if (typeof(SiebelAppFacade.AutoComplete) === "undefined") { SiebelJS.Namespace("SiebelAppFacade.AutoComplete"); define("siebel/custom/AutoComplete", ["siebel/phyrenderer","siebel/custom/typeahead"], function () { SiebelAppFacade.AutoComplete = (function () { function AutoComplete( pm ){ /* Be a good citizen. Let Superclass constructor function gets executed first */ SiebelAppFacade.AutoComplete.superclass.constructor.call( this, pm ); /* Static List of Control Identifier which will be displayed in Carousel; */ } SiebelJS.Extend( AutoComplete, SiebelAppFacade.PhysicalRenderer ); AutoComplete.prototype.ShowUI = function(){ SiebelAppFacade.AutoComplete.superclass.ShowUI.call( this ); var pm = this.GetPM(); } /// bind events function AutoComplete.prototype.BindEvents = function(){ SiebelAppFacade.AutoComplete.superclass.BindEvents.call( this ); var pm = this.GetPM(); var controls = this.GetPM().Get("GetControls"); // read out Description field $('[aria-label="Alternate Phone #"]').dblclick(function(){ // var controls = pm.Get( "GetControls" ); var cntrl = controls[ "Description2" ]; // alert(controls); var Status = pm.ExecuteMethod( "GetFieldValue", cntrl ); //alert(Status); responsiveVoice.speak( Status ); }); ///////////////////////////////// var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ]; //$('#1_Last_Name').typeahead({ /// tt-menu tt-open $('[aria-label="Alternate Phone #"]').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', source: substringMatcher(states) }); //define colour, Border and Width Scheme $('.tt-menu').css({ "background": "#F5F5F5", "width": "155px","border-style": "solid"}) //////////////////////////////// }; return AutoComplete; } ()); return "SiebelAppFacade.AutoComplete"; }); } |
Working Example of the above is :
Will be sharing further advaced option te fetch data from Files and Siebel Database in further Articles.
Your Comments are most welcomed ..
Will be sharing further advaced option te fetch data from Files and Siebel Database in further Articles.
Your Comments are most welcomed ..
Very innovative. Appreciate your effort on implementing this and spreading the knowledge among us.
ReplyDeleteHi Rahul...eagerly waiting for its 2nd part(fetch data from Files and Siebel Database ) :-)
ReplyDeletehttp://www.siebelfoundations.com/2017/08/auto-complete-siebel-text-fields-part-1.html, check this
Deletehttp://www.siebelfoundations.com/2017/08/auto-complete-siebel-text-fields-part-1.html, for advance version
ReplyDelete