In the fourth module of Siebel Open UI training series, we will discuss about Physical Renderer Customization. If you didn’t read our previous article on Presentation Model Customization, we would suggest you to read that first. It will help you to understand this article better as Presentation Model and Physical Renderer are interrelated.

After you complete this module, you will know

– What is Physical Renderer

– It’s role in Siebel Open UI

– Physical Renderer Customization steps

So, lets start our discussion with Physical Renderer definition.

What is Physical Render in Siebel Open UI?

– Like Presentation Model, Physical Renderer is also a client side JavaScript file. It binds HTML elements with Presentation Model.

– It is responsible to build user interfaces. It takes logical data and does physical rendering of it in HTML using CSS files.

– Physical Renderer can use third-party controls like JQuery library

– It can display same set of records in different ways on different views

• List Applet
• Form Applet
• Carousel
• Calendar
• Table format
• Tree

– It allows records to be displayed in different ways on different platforms like Desktop, Mobile

Few business scenarios where you can use Physical Renderer Customization:

– Display or hide a field based on the property value of Presentation Model

– Display records in different ways like carousel, table, grid

– When your application needs platform specific look-and-feel like Desktop or Mobile

We will take the same example that we have used in Presentation Model customization, to discuss Physical Renderer Customization steps also. Our example was – on Contact Form Applet, if Status field has any value, show the field ‘WorkPhoneNum#’ else hide it. In our previous module, we have built a Presentation Model JS file to capture the Status field value. Here we will write a Physical Render JS file to build the user interface.

Steps for Physical Renderer Customization:

1) Verify the object class does not exist

2) Add the class to the Siebel namespace

3) Define the Physical Renderer file location and other dependencies if any

4) Add a constructor function within the class

4.1) Declare the class constructor as function

4.2) Inherit the super class constructor

4.3) Declare the class as an extension of default Physical Renderer

4.4) Declare bindings to the Presentation Model

4.5) Add script for custom method/s

Step 1: Verify the object class does not exist

– Like Presentation Model, first check whether the class has already been implemented or not. This should be the first statement to avoid any possible conflict.

– Syntax:

if( typeof( SiebelAppFacade.custom_class_name ) === “undefined” ) {

– Script for our example:

// Verify same class is not defined yet
if( typeof( SiebelAppFacade.ShowHideFieldsPR ) === “undefined” ){

Step 2: Add the class to the Siebel namespace

– Every class must be added to the ‘SiebelAppFacade’ namespace

– Use NameSpace() function of SiebelJS class to do this

– Syntax:

SiebelJS.Namespace( “SiebelAppFacade.custom_class_name” );

– Script for our example:

// Add the class to the SiebelAppFacade namespace
SiebelJS.Namespace( “SiebelAppFacade.ShowHideFieldsPR” );

Step 3: Define the Physical Renderer file location and other dependencies if any

– ‘Define’ method identifies the modules that Siebel Open UI uses to locate the Physical Renderer file and other dependent JS files

– It must have a return statement like return “SiebelAppFacade.custom_class_name”;

– Syntax:

define (Module_name,List_of_dependencies,Function);

Module_name is nothing but the Physical Renderer file name with file path but without file extension.

List_of_dependencies is an array of all dependent modules that are required to run Physical Renderer properly. If there is no dependency, keep it blank.

Function identifies the function name that must return an object.

– Script for our example:

// Define the Physical Renderer file location and other dependencies if any
define(“siebel/custom/ShowHideFieldsPR”, [“order!3rdParty/jquery.signaturepad.min”,
“order!siebel/phyrenderer”], function () {

Step 4: Add a constructor function within the class

4.1) Declare the class constructor as function

4.2) Invoke the super class constructor

4.3) Declare the class as an extension of default Physical Renderer

4.4) Declare bindings to the Presentation Model

4.5) Add custom method/s

Step 4.1. Declare the class constructor as function

– Declare the class constructor as a child object of SiebelAppFacade

– It must have a return statement

– Syntax:

SiebelAppFacade. custom_class_name = ( function(){
— Writ the code here—
return custom_class_name; } ());

– Script for our example:

// Declare the ShowHideFieldsPR class as a function
SiebelAppFacade.ShowHideFieldsPR = ( function(){
— Write the code here—
return ShowHideFieldsPM; } ());

4.2) Invoke the super class constructor

– When Open UI calls the custom constructor in Physical Renderer JS file, it passes Presentation Model objects. Custom constructor uses these objects to instantiate all required methods and attributes.

– Syntax:

function custom_class_name ( pm ){
SiebelAppFacade. custom_class_name.superclass.constructor.call( this, pm );
}

– Script for our example:

// Call the super class constructor
function ShowHideFieldsPR( pm ){
SiebelAppFacade.ShowHideFieldsPR.superclass.constructor.call( this, pm ); }

4.3) Declare the class as an extension of default Physical Renderer

– Use SiebelJS.extend() to declare the class as an extension of Physical Renderer

– Syntax:

SiebelJS.Extend(custom_class_name, SiebelAppFacade.PhysicalRenderer);

– Script for our example:

//Extend the class so that it can access all pre built functions
SiebelJS.Extend( ShowHideFieldsPR, SiebelAppFacade.PhysicalRenderer );

4.4) Declare bindings to the Presentation Model

– Bind the Presentation Model properties with custom class/methods

– Syntax:

This.GetPM().AttachPMBinding ( “<Presentation Model Property Name>”, <Physical renderer method>, {scope:this});

– Script for our example:

// Attach PM Binding
SiebelAppFacade.ShowHideFieldsPR.superclass.Init.call(this);
this.AttachPMBinding( “ShowHideFieldsPM”, ModifyLayout );

4.5) Add scripts for custom method/s

– Write the script for all custom methods, specified in INIT function

– Syntax:

function CustomMethod(){
— Write the code here —
}

– Script for our example:

function ModifyLayout( ){
var controls = this.GetPM().Get( “GetControls” );
var canShow = this.GetPM().Get( “ShowHideStatus” );
var WorkPhoneNum = controls[ “WorkPhoneNum” ];
if( canShow ){

$( “div#WorkPhoneNum_Label” ).show();
$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).show();
}

else{

$( “div#WorkPhoneNum_Label” ).hide();
$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).hide();
}

}

Here is the complete script used in the example:

/*————————— Physical Renderer Customization to Show/Hide a field ————————*/

// Verify same Physical Renderer Class is not defined yet

if( typeof( SiebelAppFacade.ShowHideFieldsPR ) === “undefined” ){

// Add the class to the SiebelAppFacade namespace

SiebelJS.Namespace( “SiebelAppFacade.ShowHideFieldsPR” );

// Define the Physical Renderer file location and other dependencies if any

define(“siebel/custom/ShowHideFieldsPR”, [“order!3rdParty/jquery.signaturepad.min”, “order!siebel/phyrenderer”], function () {

// Declare the ShowHideFieldsPR class as function

SiebelAppFacade.ShowHideFieldsPR = ( function(){

// Call the super class constructor

function ShowHideFieldsPR( pm ){
SiebelAppFacade.ShowHideFieldsPR.superclass.constructor.call( this, pm );
}

//Extend the class so that it can access all pre built functions

SiebelJS.Extend( ShowHideFieldsPR, SiebelAppFacade.PhysicalRenderer );

// Attach PM Binding

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

this.AttachPMBinding( “ShowHideFieldsPM”, ModifyLayout );

};

// Add script for custom methods

function ModifyLayout( ){

var controls = this.GetPM().Get( “GetControls” );

var canShow = this.GetPM().Get( “ShowHideStatus” );

var WorkPhoneNum = controls[ “WorkPhoneNum” ];

if( canShow ){

$( “div#WorkPhoneNum_Label” ).show();

$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).show();

}

else{

$( “div#WorkPhoneNum_Label” ).hide();

$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).hide();

}

}

return ShowHideFieldsPR;

} ());

return “SiebelAppFacade.ShowHideFieldsPR”;

});

}

Like Presentation Model Methods, there are few frequently used Physical Renderer Methods also. To know more, read our article on Physical Renderer Methods.

This ends our Physical Renderer Customization module.

If you have any question about Physical Renderer Customization, Please feel free to comment below.

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.

<< Module 3: Presentation Model Customization       Module 5: Manifest File Customization >>

Watch our YouTube Video on Physical Renderer Customization: