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