Unleash Technology

Physical Renderer Customization (Siebel Open UI Training – Part 4)

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:

https://youtu.be/UX39dYNV64o

Sharing is caring!

  • Fisrt of all let me congrat you on your post series.

    I've liked it so much that I tried to configure it on my environment, but I'm getting an error on this statement:
    SiebelAppFacade.ShowHideFieldsPR.superclass.Init.call(this);

    The error is this:
    Uncaught TypeError: Cannot read property 'superclass' of undefined

    Do you know what I've missed?

  • Hi,
    Nice to know that it helped you.
    Regarding the error, please let me know are you trying the same example? which siebel open ui version you are using? Whatever examples are given here, tested on 8.1.1.11. There are few differences between 8.1.1.11 and prior version.

  • Vivek Kumar Mishra

    Hi,
    I have one requirement in siebel openui where i need help from you experts.below is the requirement :
    1- in List applet,i need to show a form applet b/w 2 records. suppose in vanilla Case List Applet, if i select first record then all below records should slide down and just below selected first record one form applet (Case Form Applet) should be shown. this should happen with any record selected (at a time only one form applet should appear on list applet).

    please let me know how this can be done and if possible please share the code or steps to do this.

    Thanks

  • techonestop

    Hi Vivek
    This is quite interesting and challenging requirement. Hiding an applet is not a tough task, also we can easily bring back the applet using 'On Mouse Click' event. but challenging part is that how can we slide it in between 2 records!! We will try to find our answer and share here soon. Also our readers could post their solutions.

  • Vivek Kumar Mishra

    Hi,
    Thanks for noticing the requirement.request you to please help me as i need it in earliest possible time.