Siebel Auto Complete Plugin :- Part 1

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.

• 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

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 ..

Siebel Open UI Enhancement ,Part 4: Siebel Voice Commands, SIBI The Final API

Hello All,

In the previous articles of this series i explained text to speech functionality and speech to Text functionality.Here i will be sharing some 

Text To Speech : http://www.siebelfoundations.com/2017/05/siebel-open-ui-enhancement-text-to.html

Text To Speech Advanced : http://www.siebelfoundations.com/2017/05/siebel-open-ui-enhancement-part-3-text.html

Speech To Text : http://www.siebelfoundations.com/2017/05/siebel-open-ui-enhancement-part-2.html

So here in this article i am explaining my final version, this post will demonstrate how Siebel can listen Voice Inputs and perform necessary actions. I call it SIBI

Siebel Voice Commands :

• This functionality listens users voice as input and Understands commands like , Create a new record, Delete an Existing record, Navigate to next Record and Update a Existing Record
• User will be able to enter value in any Field by speaking out the text and this API will write the value in field without typing 
• User Needs to Double Click on the fields to Start entering value in the Form.
• No 3rd party API or plugin has been used for this 
• Its default feature of HTML5

Video Demo for the above is:

You can Download sample code here :
https://drive.google.com/open?id=0B52024rQ9Hc0NXQxWTR1TEtUbzg
So Make Siebel Listen to You ;-) by trying SIBI.
Please share your views about SIBI. Your suggestions are most welcome..

<<<<<<<< Previous in the Series >>>>>>>>>   

Siebel Open UI Enhancement ,Part 1: Text to Speech API

Hello all,

After a long break from writing any useful post i am writing this post after one of my application user demanded a feature to readout Siebel Fields, so i thought to give it a try and achieved it as below.

The concept is very simple we need to call a 3rd party plugin or API and pass field value to it, that we want system to speak. There are various API's available to achieve it to name a few

• https://responsivevoice.org/ 
• http://www.jqueryscript.net/other/Lightweight-jQuery-Based-Text-To-Speech-Engine-Articulate-js.html
• http://www.masswerk.at/mespeak/
• http://www.jtalkplugin.com/

I used method from https://responsivevoice.org/, the API is free to use and supports many options.

Base function is responsiveVoice.speak("Text to Speak"), here speak() take in input the text to speak. Additional parameters that can be passes are,

• Changes default voice to "UK English Male", responsiveVoice.speak("hello world", "UK English Male");
• Sets Pitch of voice, responsiveVoice.speak("hello world", "UK English Male", {pitch: 2});
• Sets volume of vocie, responsiveVoice.speak("hello world", "UK English Male", {volume: 1});

for further documentation please refer, https://responsivevoice.org/api/

Tasks to do to make it work in Siebel,

1. Download responsivevoice.js from http://code.responsivevoice.org/responsivevoice.js or Include the script directly in your code , <script src="http://code.responsivevoice.org/responsivevoice.js"></script>
2. Add the file under Manifest Files if downloaded else directly refer this is PR file
3. Write a PR file with this JS file under define section , define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"] 
4. Associate PR file with a Applet 
5. In PR file write code to get value of certain field and call speak() method on some event say Button click.

Sample PR File

Downloadable link to PR and JS file.

https://drive.google.com/open?id=0B52024rQ9Hc0ZFg0bnYyTHM4bTg


Explanation of Code :

1. Define and Include 3rd party files

define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"] ,

all the JS files that code refer need to be defined here. Since we are using speak() method that is defined in file responsivevoice.js so we need to include this. Also either we can directly call file by refering its web location ["siebel/phyrenderer","//code.responsivevoice.org/responsivevoice.js"] or by locally saving file under siebel/custom folder.

2. Creation of button that will call method speak

 var id1 = this.GetPM().Get("GetFullId") + '-siebui-cust-ActivateMember-btn';

//Custom Button that will trigger speech API

var Speak = "<button " +
"id= '" + id1 + "' " +
"class= 'siebui-ctrl-btn appletButton' " +
"aria-label=Speak " +
"type=\"button\" " +
"data-display=\"Speak\" " +
"title=Speak " + ">" + "Speak" + "</button>";

$("#s_" + this.GetPM().Get("GetFullId") + "_div").find(".AppletMenu").append(Speak);


3. Function that gets value of a selected field and calls speak method 

$('button[data-display="Speak"]').click(function(){

var controls = pm.Get( "GetControls" );
                         var cntrl = controls[ "Abstract" ];
var Status = pm.ExecuteMethod( "GetFieldValue", cntrl );
//alert(Status);
responsiveVoice.speak( Status );
});

Working Demonstration of this is shown in below video.

any suggestions are always welcome...

In my next post i will be sharing Speech to Text conversion functionality in Siebel..

<<<<<<<<Next in the Series >>>>>>>>>