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 validateEmail will 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… :)

Coding Physical Model (Part -2 )

Read Part -1

Now let’s take a look in to the code( that posted in lastpost) one by one.  

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

Physical Model

/*---------------------------Coding starts------------------------*/

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

 /* No Need to worry about this line. This line make sure that the same definition is not yet defined. */

                SiebelJS.Namespace( "SiebelAppFacade.ValidatePM" );

/* SiebelJS.Namespace( "SiebelAppFacade.ValidatePM" ); This will create new name space called ValidatePM. */

                SiebelApp.S_App.RegisterConstructorAgainstKey("ValidatePModel","SiebelAppFacade.ValidatePM" );

/*Above code will register our constructor It s format is

“RegisterConstructorAgainstKey (key, constructor)”. This is very important because we need this key to map our customized file in many places.

*/

                SiebelAppFacade.ValidatePM = ( function(){

                /*we just started to define our class. Its name is ValidatePM */

                                function ValidatePM( proxy ){

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

                                }

                /*Calling super class*/

                                SiebelJS.Extend( ValidatePM, SiebelAppFacade.PresentationModel );

                /* Above line add  our class to frame work, now our class can access many prebuilt functions. */               

                                ValidatePM.prototype.Init = function(){

                                                /*Init method will initialize, we can initialize properties, methods etc.. */

                                                SiebelAppFacade.ValidatePM.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 ValidatePM;

                }());

}

/*-------------------------------Coding Ends--------------------------------------*/

 

Now lets take a look in to Init function.

ValidatePM.prototype.Init = function(){

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

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

                                };

Here  this.AddProperty( "isEmailSet", "" );       created a property called  “isEmailSet” and initialized this value as null. Now I initialized a method this.AddMethod( "FieldChange",  OnFieldChange, { sequence : false, scope: this } );     read more

Now lets discuss our custom method

function OnFieldChange( control, value ){

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

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

                         }

 }

Every field change will trigger this method. And this will check for changed  control name. In our case, we are listening to changes in email field. So if email address has any  change, then we will set isEmailset to true.

This change will trigger our PhysicalRender file. Because in physical render file we will listen this property (That we will discuss later).  So any change in this property (isEmailSet) will trigger our custom methods in physical render file.

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

Fixing Issues in Mozilla, Chrome and other browsers (Siebel Open UI Issues)

If you are getting an error as shown in figure, when you drilldown or cliking an mvg or pick applet. Please check following steps. You can check following steps if you face any issue in browsers other than IE



1. Go to SiteMap (shortcut: control+shift+A)
2. Click on Administration - Web Browser > Browsers
3. For new SI browsers (e.g. Chrome, Mozilla, Safari): If not present, create a browser with the name "Mozilla 5.0" and with the following capabilities:
a. Set the "User-Agent" capability to "Mozilla/5.0"
b. Set the "Accept" capability to "image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*"
4. For older SI browsers: If not present, create a browser with the name "Mozilla 4.0" and with the following capabilities:
a. Set the "User-Agent" capability to "Mozilla/4.0"
b. Set the "Accept" capability to "image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*"
5. After you have made the changes you will need to restart your web server.

MVG Issue in Siebel OpenUI

Siebel Open UI have an issue with MVG. The MVG does not display the data.
The pop-up shows an "empty" applet with only the buttons visible.


Issue is corrected when the quotes are removed from Applet Select parameter.


To Solve this issue please do the following steps

1. Go to Site Map > Administration Server Configuration > Component Definitions screen.
2. Query for the following in the corresponding fields:
    Component: Object Manager Component (Ex: ePharma , Fins)
    Parameter:   AppletSelectStyle

3. Existing Value: "Applet Select" for the parameter "AppletSelectStyle".
4. Change the value from "Applet Select"   to  Applet Select  (Remove the Quotes).

5. Log off.
6. Restart Siebel Servers.

Login again and test application .. this will work :-)

Disable Siebel OpenUI.

We can disable open UI feature from server configuration.
To do this goto 
Administration server configuration  -> Enterprise->Component definitions ->Component parameter
query EnableOpenUI make the value as false.
Restart server.

You may not get the old login screen.. It has some changes... But once you login we can see our old siebel :)