In the third module of Siebel Open UI training series, we will discuss about Presentation Model Customization.
After you complete this module, you will know
– What is Presentation Model
– It’s role in Siebel Open UI
– Presentation Model Customization steps
We hope that you have a fair knowledge about Siebel Open UI Architecture. If not, we would suggest you to read our previous article on Siebel Open UI Architecture first. It will help you to understand this module better.
Well, lets start our discussion with Presentation Model definition.
What is Presentation Model in Siebel Open UI?
– It is a JavaScript file that determines how to apply business logic on metadata and run-time data given by client proxy.
– It is client side scripting, collection of properties and methods.
- Property: It contains information about current state of each user interaction.
- Method: It defines the characteristics that modify the state of the object. For example – if user chooses value A for the field X, then apply method to hide field Y.
– Presentation Model is completely Siebel repository independent object. Addition or deletion of business logic from Presentation Model file does not need SRF compilation.
– It does not do rendering of any physical HTML or CSS file.
– It captures client interactions, like did the user leave a control or did the user click on a link?
– It supports different logic for different platforms like desktop, mobile.
– It can call server side business service also whenever required.
Few business scenarios where you can use Presentation Model Customization:
– Add additional control or list column that is not provided by client proxy
Example: Add an additional column to delete multiple records at a time
– Capture field values and set properties
Example: If an user chooses the pick list value ‘A’ for the field X, then hide the field Y
– Interact with Siebel Server
Example: Call server side business service
Before we discuss Presentation Model Customization steps, let us tell you few terminologies. We will use these through out our Siebel Open UI training series.
Terminology:
JavaScript API:
– JavaScript API gives a set of JavaScript functions to access and manipulate client side objects.
– In Siebel Open UI, JavaScript API replaces the browser scripting.
– Example : control.GetName() – GetName function returns the control name.
FieldChange(control, field value) modifies the field value of the control.
NameSpace:
– It is the place to maintain all Siebel objects instantiated in client cache.
Class:
– It instances Siebel object with unique name.
– In Javascript, there can be only one instance of a class at a particular time.
Good to know: JavaScript is a class-less language though functions can be used to simulate Class concept. Everything in JavaScript is treated as object.
Constructor:
– It instantiates and defines methods for the class.
Renderer Key Registration:
– It determines what all JavaScript files need to download on the browser.
Now we will discuss Presentation Model Customization step by step with an example.
Example: On Contact Form Applet, if Status field has any value, show the field ‘WorkPhoneNum#’ else hide it.
This is two step customization – first we will build a Presentation Model file to capture the Status field value (in this module) and then pass the value to Physical Render to hide or show the field ‘WorkPhoneNum#’ (in next module).
Steps for Presentation Model Customization:
1) Verify the object class does not exist
2) Add the class to Siebel namespace
3) Define the Presentation Model File location and other dependencies if any
4) Add 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 Presentation Model
4.4) Initialize INIT method to add properties and methods to the class
4.5) Add script for the custom method/s
Step 1: Verify the object class does not exist
– First you 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 Presentation Model class is not defined yet
if( typeof( SiebelAppFacade.ShowHideFieldsPM ) === “undefined” ){
Step 2: Add the class to Siebel namespace
– Every class must be added to the ‘SiebelAppFacade’ namespace.
– Use ‘NameSpace()’ function to do this
– Syntax:
SiebelJS.Namespace( “SiebelAppFacade.custom_class_name” );
– Script for our example:
// Add the class to the SiebelAppFacade namespace
SiebelJS.Namespace( “SiebelAppFacade.ShowHideFieldsPM”);
Step 3: Define the Presentation Model file location and other dependencies if any
– ‘Define’ method identifies the modules that Siebel Open UI uses to locate the Presentation Model 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 the Presentation Model file name with file path but without file extension.
- List_of_dependencies is an array of all dependent modules required to execute Presentation Model JS file. If there is no dependency, keep it blank.
- Function identifies the function name and returns an object.
– Script for our example:
// Define the presentation model file location and other dependencies if any
define(“siebel/custom/ShowHideFieldsPM”, [], function () {
— Write the code here—
return “SiebelAppFacade.ShowHideFieldsPM”;
});
Step 4: Add 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 Presentation Model
4.4) Initialize INIT method to add properties and methods to the class
4.5) Add script for the custom method/s
Step 4.1: Declare the class constructor as function
– Declare the class constructor as a child 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 ShowHideFieldsPM class as function
SiebelAppFacade.ShowHideFieldsPM = ( function(){
— Write the code here—
return ShowHideFieldsPM; } ());
Step 4.2: Invoke the super class constructor
– When Open UI calls a custom constructor, it passes a proxy object. Custom constructor uses this proxy object to instantiate as-delivered objects.
– Syntax
function custom_class_name ( proxy ){
SiebelAppFacade. custom_class_name.superclass.constructor.call( this, proxy ); }
– Script for our example:
// Call the superclass constructor
function ShowHideFieldsPM( proxy ){
SiebelAppFacade.ShowHideFieldsPM.superclass.constructor.call( this, proxy ); }
Step 4.3: Declare the class as an extension of default Presentation Model
– Use SiebelJS.extend() to declare the class as an extension of Presentation Model
– Extended class can access all pre built functions of default PM
– Syntax
SiebelJS.Extend(custom_class_name, SiebelAppFacade.PresentationModel );
– Script for our example:
//Extend the class so that it can access all pre built functions
SiebelJS.Extend( ShowHideFieldsPM, SiebelAppFacade.PresentationModel );
Step 4.4: Initialize INIT method to add properties and methods to the class
– Declare the INIT function of the custom class
Syntax: Custom_Class_name.prototype.Init = function(){
– Call Super class INIT function to initialize as-delivered functionalities
Syntax: SiebelAppFacade.Custom_Class_name.superclass.Init.call( this );
– You can create properties for the class if required
Syntax: this.AddProperty( “Property Name”, “” );
– You can also override super calss methods
Syntax: this.AddMethod( “Name of the method to override”, custom method name, { sequence : false, scope : this } );
– Script for our example:
ShowHideFieldsPM.prototype.Init = function(){
SiebelAppFacade.ShowHideFieldsPM.superclass.Init.call( this );
this.AddProperty( “ShowHideStatus”, “” );
this.AddMethod( “ShowSelection”, SelectionChange, { sequence : false, scope : this } );
this.AddMethod( “FieldChange”, OnFieldChange, { sequence : false, scope: this } );
};
Step 4.5 Add script for the 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:
// Custom method to execute when next record is selected
function SelectionChange(){
var controls = this.Get( “GetControls” );
var control = controls[ “Status” ];
var value = this.ExecuteMethod( “GetFieldValue”, control );
this.SetProperty( “ShowHideStatus”, ( value ? true: false ) );
}
//Custom method to execute when field value changes
function OnFieldChange( control, value ){
if( control.GetName() === “Status” ){
this.SetProperty( “ShowHideStatus”, ( value ? true: false ) );
}
Here is the complete script used in the example:
/*————————— Presentation Model Customization to Show/Hide a field ————————*/
// Verify same Presentation Model class is not defined yet
if( typeof( SiebelAppFacade.ShowHideFieldsPM ) === “undefined” ){
// Add the class to the SiebelAppFacade namespace
SiebelJS.Namespace( “SiebelAppFacade.ShowHideFieldsPM” );
// Define the Presentation Model file location and other dependencies if any
define(“siebel/custom/ShowHideFieldsPM”, [], function () {
// Declare the ShowHideFieldsPM class as function
SiebelAppFacade.ShowHideFieldsPM = ( function(){
// Call the super class constructor
function ShowHideFieldsPM( proxy ){
SiebelAppFacade.ShowHideFieldsPM.superclass.constructor.call( this, proxy );
}
//Extend the class so that it can access all pre built functions
SiebelJS.Extend( ShowHideFieldsPM, SiebelAppFacade.PresentationModel );
// Initialize the object to add properties, methods
ShowHideFieldsPM.prototype.Init = function(){
SiebelAppFacade.ShowHideFieldsPM.superclass.Init.call( this );
this.AddProperty( “ShowHideStatus”, “” );
this.AddMethod( “ShowSelection”, SelectionChange, { sequence : false, scope : this } );
this.AddMethod( “FieldChange”, OnFieldChange, { sequence : false, scope: this } );
};
// Custom method to execute when next record is selected
function SelectionChange(){
var controls = this.Get( “GetControls” );
var control = controls[ “Status” ];
var value = this.ExecuteMethod( “GetFieldValue”, control );
this.SetProperty( “ShowHideStatus”, ( value ? true: false ) );
}
//Custom method to execute when field value changes
function OnFieldChange( control, value ){
if( control.GetName() === “Status” ){
this.SetProperty( “ShowHideStatus”, ( value ? true: false ) );
}
}
return ShowHideFieldsPM;
} ());
return “SiebelAppFacade.ShowHideFieldsPM”;
});
There are few frequently used Presentation Model Methods that every developer should know. We have discussed such methods in an another article – Presentation Model Methods.
This ends our Presentation Model Customization module.
If you have any question about Presentation Model Customization, Please feel free to comment below.
Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.
<< Module 2: Siebel Open UI Architecture Module 4: Physical Renderer Customization >>
Dear,Could you please provide the access to youtube vedios.
Hi Serik
Where do you want to put that image on the application? Without using open ui functionalities also, you can achieve it,map the picture in application using bitmap and then use symbolic url..
Please let us know if you need more details. 🙂
Hi! I want to put image and it linkes to homepage. How I can do this
Hi! I want to put image and it linkes to homepage. How I can do this
Hi Elizabeth,
It is really tough to debug issues without seeing files. Just couple of suggestions:
1) Check Render Key, should be same in every place (manifest, PM, PR)
2) JS file syntax
Yes, it's true, lots to learn in Open UI. Please let us know once you fix this issue.
Thanks for your reply! I see the file under the inspect tab but it's a path, like /siebel/custom/file.js instead of the ones on the server (which I'm assuming is normal, maybe?). I've tried running against a local database and our sandbox but the issue with the sandbox is our app servers use AIX. The path names for physical renderer, presentation model, or any js file on there has different path slashes compared to my windows machine. So it gets confusing to run against sandbox when I'm trying to access my local file compared to one on the server.
But, when I debug on the thick client against my local database with the windows path, the siebel log shows the manifest found the file and the breakpoints get hit for extending, etc. but not the constructor and init method. I can even see the SiebelAppFacade.PresentationModel object that looks right, the class should be an extension of that, but nothing else is firing. Only on the server does my file actually call the constructor and init method for the presentation model. The applet isn't rendering properly so I'm sure something is missing for the physical renderer as well. It's just weird to look at tons of examples, see very similar code and it not work the way I would think it would. There is lots to learn!
Hi Elizabeth,
Yes, we can do the same configuration on thick client as well. Sometimes I use thick client .10/.11 to do requirement prototyping and it works fine. As you mentioned, we don't need any server interaction unless you are calling server side business service from presentation model JS file. Path where you have placed the js file on thick client? Can you see that JS file under 'Inspect' tab?
Funny to answer my own question a day later, the issue I was up against was the js files needed to be on the server compared to my local. We have another team controlling the file system even for our sandbox so I guess my question is were you able to make this configuration work on your thick client? I thought the scripts would be run client side along with the presentaton model, so with no server interaction needed.
Even on a local database with file paths in the manifest with my local machine, Siebel would find the find the file and extend the class but the connection was still missing where the constructor method was not firing. Does there need to be an extra step to get such a configuration to work solely on your thick client? Just wondering, thanks.
It's great to see recent posts on this topic, I keep finding a range of ones prior to the manifest administration configuration.
I'm having issues where the presentation model is being extended, etc. but the methods listed that should get called aren't being hit in debug. The constructor doesn't get called, the framework does get extended but nothing happens. My code looks similar to yours in a sense but I'm trying to catch when a user has selected a menu item to use a jquery plugin that will popup a window with an iframe.
Have you run into where methods don't seem to be getting called even with the class extending the framework? I keep trying different examples with just a physical renderer or presentation model to just get something to actually fire. The file gets loaded (shown in logs) and I can walk through debug with it, but like I said the constructor method doesn't get called nor the init method. I'm sure I'm missing a piece but just wondering.
Nice post