adding voice input in siebel openUI :: Physical Render experiement

Please Note: Here we are using a webkit property. That means this feature will work only in google chrome.
Google chrome supports it's own voice search property. We can add this property to our application by adding "x-webkit-speech" in our input fields. Here we can create a physical render and implement this feature.


<!-------------------CODE Begins----------------------------!>

if( typeof( SiebelAppFacade.GoogleVoicePR ) === "undefined" ){
    SiebelJS.Namespace( "SiebelAppFacade.GoogleVoicePR" );
   
    SiebelApp.S_App.RegisterConstructorAgainstKey( "GoogleVoicePRenderer", "SiebelAppFacade.GoogleVoicePR" );
   
    SiebelAppFacade.GoogleVoicePR = ( function(){
       
       
        function GoogleVoicePR( pm ){
            SiebelAppFacade.GoogleVoicePR.superclass.constructor.call( this, pm );
            var controls = this.GetPM().Get( "GetControls" );
            var cntrl = controls[ "Last Name" ];   
            var lastNameCntrl  = cntrl.GetInputName();
            $('input[name="'+lastNameCntrl+'"]').attr("x-webkit-speech","x-webkit-speech");

        }
       
        SiebelJS.Extend( GoogleVoicePR, SiebelAppFacade.PhysicalRenderer );
       
        return GoogleVoicePR;
    }());
}


<!-------------------Code Ends------------------------------!>

Coding Physical Render(Part -3)

 Read Part -1

Read Part-2 

I have given three color for code. Red indicated that it is mandatory. Black indicates comment and green indicates custom code.

if( typeof( SiebelAppFacade.ValidatePR ) === "undefined" ){

    SiebelJS.Namespace( "SiebelAppFacade.ValidatePR" );

   

    SiebelApp.S_App.RegisterConstructorAgainstKey( "ValidatePRenderer", "SiebelAppFacade.ValidatePR" );

   

    SiebelAppFacade.ValidatePR = ( function(){

       

                               

        function ValidatePR( pm ){

            SiebelAppFacade.ValidatePR.superclass.constructor.call( this, pm );

            this.GetPM().AttachPMBinding( "isEmailSet",  validateEmail, { scope: this });

                /* This is very important. We bing “isEmailSet” variable. So that this will track changes in this variable in physical model. and if changes happed, then validateEmailwill execute. */

        }

       

        SiebelJS.Extend( ValidatePR, SiebelAppFacade.PhysicalRenderer );

       

                                 function validateEmail() {

                var controls = this.GetPM().Get( "GetControls" );

            var cntrl = controls[ "EmailAddress" ];        

/*The  controls[ "EmailAddress" ]; will return an object  that contain all information about EmailAddress*/

                                                var emailcntrl  = cntrl.GetInputName();

/*cntrl.GetInputName(); Using the above object getting input name  */

                                                var email = $('input[name="'+emailcntrl+'"]').val();

/*Here is jQuery!!... using our input name we are reading the value in it. */

                                                alert(email);

                                                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

                                                if( !emailReg.test( email ) ) {

                                                                alert("Please enter a valid Email");

                                                                return false;

                                                } else {

                                                                alert("This is a valid Email");

                                                                return true;

                                                }

/*Using a regular expression, we are testing whether it is a valid email or not.. old browser script.. */

                                }

       

        return ValidatePR;

    }());

}

Now if you change value in email field, will trigger Physical Model.. then Physical render and email filed will get validated.  Hope you understand… :)

Introduction to Physical Model & Physical Render in Siebel Open UI

Before looking into details we can discuss a real time situation. Normally Siebel will not validate whether email is in right format or not.  So here we can implement a small validation using this Physical model and physical render. Remember one thing, I am just explain a situation for your understanding.. Actually we can do many customizations like changing color, theme, handling any events… by using this…

Our validation (Email Validation) should work whenever the user leaves his control from email field with a change in existing value. That means we need to catch an event called FieldChange .  Our Physical model will catch that change in email field. Here we can validate it(Whether email is in right format or not), but for better understanding we can validate this in our physical render file. So we need to pass this information from Physical model  to physical render file right?  To do this we need to keep a variable (property) let say “isEmailSet”, in Physical modeland bind the same in physical render, so that any change in this variable will trigger physical render, and validation will proceed.

 When the email filed value changes our Physical model change isEmailSet to ture, this will invoke physical render and it will validate.

Physical Model is a JavaScript file that helps us to deal with Meta data and data in Siebel. Using physical model we can customize logic, behavior content and most importantly it help us to get events that happens in browsers such as mouse over, focus, blur(leaving focus) etc…

Physical Render is another JavaScript file that helps to build user interface. This file allows us to use third-party scripts to execute in Siebel. This binds a presentation model to physical control. 

Example of Physical Model

if( typeof( SiebelAppFacade.SummaryPM ) === "undefined" ){

               

                SiebelJS.Namespace( "SiebelAppFacade.SummaryPM" );

                SiebelApp.S_App.RegisterConstructorAgainstKey( "SummaryPModel","SiebelAppFacade.SummaryPM" );

               

                SiebelAppFacade.SummaryPM = ( function(){

                                function SummaryPM( proxy ){

                                                SiebelAppFacade.SummaryPM.superclass.constructor.call( this, proxy);

                                }

                               

                                SiebelJS.Extend( SummaryPM, SiebelAppFacade.PresentationModel );

                               

                                SummaryPM.prototype.Init = function(){

                                                SiebelAppFacade.SummaryPM.superclass.Init.call( this );

                                                this.AddProperty( "isEmailSet", "" );       

                                                this.AddMethod( "FieldChange",  OnFieldChange, { sequence : false, scope: this } );

                                };

                               

                                function OnFieldChange( control, value ){

                                                if( control.GetName() === "EmailAddress" ){

                                                                this.SetProperty( "isEmailSet", ( value ? true: false ) );

                                                }

                                }

                                return SummaryPM;

                }());

}

Example of Physical Render

if( typeof( SiebelAppFacade.ValidatePR ) === "undefined" ){
    SiebelJS.Namespace( "SiebelAppFacade.ValidatePR" );
  
    SiebelApp.S_App.RegisterConstructorAgainstKey( "ValidatePRenderer", "SiebelAppFacade.ValidatePR" );
  
    SiebelAppFacade.ValidatePR = ( function(){
      
      
        function ValidatePR( pm ){
            SiebelAppFacade.ValidatePR.superclass.constructor.call( this, pm );
            this.GetPM().AttachPMBinding( "isEmailSet",  validateEmail, { scope: this });
        }
      
        SiebelJS.Extend( ValidatePR, SiebelAppFacade.PhysicalRenderer );
      
         function validateEmail() {
            alert("going to validate");
            var controls = this.GetPM().Get( "GetControls" );
            var cntrl = controls[ "EmailAddress" ];  
            var emailcntrl  = cntrl.GetInputName();
            var email = $('input[name="'+emailcntrl+'"]').val();
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if( !emailReg.test( email ) ) {
                alert("Please enter a valid Email");
                return false;
            } else {
                alert("This is a valid Email");
                return true;
            }
        }
      
        return ValidatePR;
    }());
}

Let’s take a look into our code one by one…in next post :)