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 :)