Voice Recognition@Siebel Open UI

I think I have found an interesting and useful feature implementation of Open UI. Brower independence granted to us by Open UI does increase the headache of testing our UI changes across multiple browsers but it also provides us with an opportunity to use different features provided by browser. Voice recognition is one such feature which is natively supported by Chrome. Although currently only chrome supports it but being a HTML 5 standard it will be incorporated in every browser sooner or later.

As, soon as I saw this feature I wanted to try it and see what all we can do with it. I came across this post on a blog devoted to Open UI which laid down the steps of including the voice recognition in any field that you wanted. In short it is as simple as including “x-webkit-speech” attribute in the input field.  So, if you just want to try it just create a plain html file with code given below and open it in chrome

<html> <head></head><body> <input type=”text” x-webkit-speech value=”enter data” /> </body></html>

It would generate output as shown below and clicking on that microphone link will ask you for voice input and populate text in the input field.

image

Once I implemented it in Siebel I realized that clicking an icon and then recording voice where you just want to enter 15-20 characters is not really productive especially if you get it wrong. The true potential could be fields like comments, notes where you would want to enter multiple lines of text and getting couple of words wrong will not hurt much. So I started exploring how to add the voice recognition to comments field but to my utter disappointment I found voice recognition is not supported on text areas, it is only supported on input type.As we all know multiline fields are defined as text areas.

Well I was not the one to give up so I found a workaround which works pretty well. The output of code I implemented was as below

image

Basically what I did was add input field at runtime and style it to appear as icon just beside the text area. When user clicks and provides speech input, I use jQuery magic to transfer their transcribed text to the text area, which makes it appear as they are speaking into the text area :). It only requires PR file to be created and following is the code to make it work.

 

if( typeof( SiebelAppFacade.TextHistorySpeechPR ) === “undefined” ){
SiebelJS.Namespace( “SiebelAppFacade.TextHistorySpeechPR” );
SiebelApp.S_App.RegisterConstructorAgainstKey( “TextHistorySpeechPRenderer”, “SiebelAppFacade.TextHistorySpeechPR” );
SiebelAppFacade.TextHistorySpeechPR = ( function(){
function TextHistorySpeechPR( pm ){
SiebelAppFacade.TextHistorySpeechPR.superclass.constructor.call( this, pm );
var pmodel = this.GetPM();
var dummyInput = “<input style=\”width: 1px\” id=\”mic\” x-webkit-speech>”;
var controls = pmodel.Get( “GetControls” );
var textHistory = controls[ “Text History” ];//get textarea control
var textHistoryName = textHistory.GetInputName();
console.log(textHistoryName);//for debugging purposes
//get the current html mockup for the text area
var currHTML = $(‘textarea[name=”‘+ textHistoryName +'”]’).parent().html();
//add an input control in front of textarea
// and style it just display microphone
$(‘textarea[name=”‘+ textHistoryName +'”]’)
.parent().html(currHTML + dummyInput);
//bind webkitspeechchange event to call our custom function
//to transfer the values
$(‘#mic’).bind(“webkitspeechchange”,function(){
transcribe(this.value, textHistoryName);
});
}
SiebelJS.Extend( TextHistorySpeechPR, SiebelAppFacade.PhysicalRenderer );
function transcribe(words,field) {
var textHistoryField = $(‘textarea[name=”‘+ field +'”]’);
//check value of text history field
//if not empty then append else override
var tValue = textHistoryField.val();
if(tValue != “”){
textHistoryField.val(tValue + ” ” + words);
}
else{
textHistoryField.val(words);
}
//clear out the input field and set focus on text area
$(‘#mic’).val(”);
textHistoryField.focus();
}//end of transcribe
return TextHistorySpeechPR;
}());
}

Questions and comments are most welcome!

6 Responses to Voice Recognition@Siebel Open UI

    • This is standard PR code. Follow the instructions on how to include PR file to your applets.
      This code assumes that you have text history named field to which you are trying add the voice recognition.

      In your case replace the name of the field in your applet. I will try to update post also with instructions

  1. Thanks for the explaination I also wanted to know if this configuration will work in iPad / i Phone as this is a ntive feature of chrome I am not sure if this will work for an Ipad or iPhone in safari. If u can confirm this please ?

    Thanks

    Neeraj

  2. Hey Neel, nice post.

    I tried this PR on the account entry applet and though I was able to make it work I got into two issues which I am not able to troubleshoot/fix.

    1) The voice icon is not coming horizontal to the text area as shown in your screenshot.
    2) For some reason its only working if I append the HTML like below (notice that the dummy input is in front.)
    $(‘textarea[name=”‘+ DescriptionName +'”]’).parent().html(dummyInput + currHTML);

    for $(‘textarea[name=”‘+ JSDescriptionName +'”]’).parent().html(currHTML + dummyInput ); the voice control is not visible and siebel is always setting the display property of the control to none.

    Regards
    Jeevan

    • Jeevan,

      It is difficult answer the question until and unless I can see the exact behavior and review the HTML that is getting created. So, I am afraid I cannot help you much on this.

  3. Hi Neel,

    I agree with Jeevan, when I tried exactly copying the script and change the control name does not displayed the mike control. My observation is that mike icon is overlapped with text area control. After changing the the script line to $(‘textarea[name=”‘+ textHistoryName +'”]’).parent().html(dummyInput+currHTML);, mike started displaying on the top of textarea control but not on the right side of it. Can you please guide us.

Leave a Reply

Contribute