Transcript of "Customizing the Presentation Model and Physical Renderer in

Siebel Open UI"

1. 1. Customizing The Presentation Model Presented by TechOneStop Techonestop.in In a
vision to make TECHNOLOGY simple for u techonestop.in1
2. 2. Objectives techonestop.in2 1) Introduction of Siebel Open UI JavaScript Application
Programming Interface (API) 2) Describe the structure the of a presentation model Javascript
file 3) Build a custom Presentation model JS file to implement own business logic
3. 3. Review: Client Proxy techonestop.in3 Proxy creates the local representation of metadata
for Presentation model. - Creates a shadow copy of controls/columns in the applet - Creates
a shadow copy of applets - Create a shadow copy of business components / business
objects - And so forth These shadow copies are treated as objects in a namespace in the
client cache
4. 4. Review: Presentation Model techonestop.in4 It is a Javascript file which determines what
logic should be applied to data on the client side Client side scripting without requiring the
need of siebel server Capture client interaction - Did the user leave a control? - Did the user
click a link? Support different logic for different platform like Desktop vs Mobile Collection
of Siebel object properties and methods Provides a logical abstraction layer of repository
metadata Does not do any rendering of physical HTML/CSS Interact with Siebel Server
side business service if required
5. 5. Siebel Open UI JavaScript API techonestop.in5 - Provides a set of Javascript functions to
access and manipulate client side objects - For example GetName Method for applet controls
returns the name of the applet control if (control.GetName() === "FirstName"){ - Return the
control name FieldChange(control, field value) modifies the field value of a control
6. 6. Scenarios of customizing the presentation model Add control or list column, not available
from client proxy Example: Add an additional column to delete multiple records at a time
Create client properties Example: Property to store TRUE or FALSE value used in client logic
Interact with siebel server Example: Call server side business service techonestop.in6
7. 7. Terminology NameSpace - Place to maintain a list of objects instantiated in client cache
Class - It instances the object with unique name - In Javascript, there can be only one
instance of class/object at a time Constructor - It instantiates and defines the methods for
the class Renderer Key registration - It helps to determine which Javascript files need to be
downloaded ** Things to remember: It is important to note that actually javascript is a classless language, though functions can be used to simulate Class concept. Everything in
javascript is treated as object. techonestop.in7
8. 8. Steps to customize Presentation Model 1) Verify the object class does not exist 2) Add the
class to the 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 presentation model 4.4) Initialize Init method to add properties and methods to
the class 4.5) Add custom method/s techonestop.in8

9. 9. Example Example: In Contact Form Applet, if Status field has any value, show
WorkPhoneNum#, else hide the field. techonestop.in9
10. 10. Step 1 Step 1: Verify the object class does not exist Checks whether the class has
already been implemented or not. This should be the first statement to avoid possible
conflicts. Syntax: if( typeof( SiebelAppFacade.customclassname ) === "undefined" ) {
Script for our example: // Verify same presentationmodel is not defined yet
if( typeof( SiebelAppFacade.ShowHideFieldsPM ) === "undefined" ){ techonestop.in10
11. 11. Step 2 Step 2: Add the class to the siebel namespace All new classes must be added to
the SiebelAppFacade namespace. Use NameSpace() function to do this Syntax
SiebelJS.Namespace( "SiebelAppFacade. customclassname" ); Script for our example: //
Add the class to the SiebelAppFacade namespace
SiebelJS.Namespace( "SiebelAppFacade.ShowHideFieldsPM"); techonestop.in11
12. 12. Step 3 Step 3: Define the presentation model file location and other dependencies if any
Define method identifies the module that Siebel Open Ui uses to locate the presentation
model file and all other dependent modules It must have a return statement like return "
SiebelAppFacade. customclassname"; Syntax define (module_name
,list_of_dependencies,function); - Module name is nothing but the presentation file name
without file extension - List_of_dependencies is an array of all dependent modules which are
required to run presentation model properly. If there is no dependencies, keep it blank. Function identifies the function name that must return an object techonestop.in12
13. 13. Step 3 (cont..) 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"; }); techonestop.in13
14. 14. Step 4 Step 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 presentation model 4.4) Initialize Init method to add properties and methods to
the class 4.5) Add custom method/s techonestop.in14
15. 15. Step 4.1 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. customclassname = ( function(){ --- Writ the code here--- return
customclassname; } ()); Script for our example: // Declare the ShowHideFieldsPM class as
function SiebelAppFacade.ShowHideFieldsPM = ( function(){ --- Write the code here--- return
ShowHideFieldsPM; } ()); techonestop.in15
16. 16. Step 4.2 Step 4.2: Inherit the super class constructor When Open UI calls the
constructor, it passes a proxy object. Our custom constructor uses this proxy object to
instantiate as-delivered objects Syntax function customclassname ( proxy )
{ SiebelAppFacade. customclassname.superclass.constructor.call( this, proxy ); } Script for
our example: // Call the superclass constructor function ShowHideFieldsPM( proxy )
{ SiebelAppFacade.ShowHideFieldsPM.superclass.constructor.call( this, proxy ); }
techonestop.in16
17. 17. Step 4.3 Step 4.3: Declare the class as an extension of presentation model Use
SiebelJS.extend() to declare the class as an extension of presentation model Extended
class can access all prebuilt functions Syntax

18.

19.

20.

21.

22.

SiebelJS.Extend(customclassname,SiebelAppFacade.PresentationModel ); Script for our

example: //Extend the class so that it can access all prebuilt functions
SiebelJS.Extend( ShowHideFieldsPM, SiebelAppFacade.PresentationModel );
techonestop.in17
18. Step 4.4 Step 4.4: Initialize Init method to add properties and methods to the class
Declare the Init function of your class Syntax CustomClassname.prototype.Init = function()
{ Call Superclass Init function to initialize as-delivered functionalities Syntax
SiebelAppFacade.CustomClassname.superclass.Init.call( this ); It may include code that
creates properties for the class, if needed Syntax this.AddProperty( "Property Name", "" );
It can also override supercalss methods Syntax this.AddMethod( "Name of the method to
override", custom method name, { sequence : false, scope : this } ); techonestop.in18
19. Step 4.4 (Cont..) 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 } ); }; techonestop.in19
20. Step 4.5 Step 4.5: Add custom method/s Any method, specified in Init function or any
custom method we want to implement, add the script here Syntax: function
CustomMethod(){ --- Write the code here --- } Script for our example: function
OnFieldChange( control, value ){ if( control.GetName() === "Status" )
{ this.SetProperty( "ShowHideStatus", ( value ? true: false ) ); } } techonestop.in20
21. Complete Script (Page 1 of 3) /*---------------------Presentation Model to Show/Hide a
field--------------------*/ // Verify same presentationmodel 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 superclass constructor
function ShowHideFieldsPM( proxy )
{ SiebelAppFacade.ShowHideFieldsPM.superclass.constructor.call(this,proxy ); } //Extend the
class so that it can access all prebuilt functions SiebelJS.Extend( ShowHideFieldsPM,
SiebelAppFacade.PresentationModel ); techonestop.in21
22. Complete Script (Page 2 of 3) // 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 ) ); } techonestop.in22

23. 23. Complete Script (Page 3 of 3) //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"; }); } techonestop.in23
24. 24. Highlights Presentation Model is a Javascript file which determines what logic should be
applied to data on the client side. Steps to implement to Presentation Model Customization :
1) Verify the object class does not exists 2) Add the class to the 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 presentation model 4.4) Initialize
Init method to add properties and methods to the class 4.5) Add custom method/s
techonestop.in24
25. 25. Customizing The Physical Renderer Presented by TechOneStop Techonestop.in In a
vision to make TECHNOLOGY simple for u techonestop.in2
26. 26. Objectives techonestop.in2 1) Describe the structure of physical renderer javascript file 2)
Build a custom Physical Renderer JS file to implement own business logic
27. 27. Physical Renderer techonestop.in2 - Like presentation model, physical renderer is also
client side javascript file - Responsible to build user interface (UI) - Can display same set of
records (based upon same presentation model) in different ways on different views List
Applet Form Applet Carousel Calendar Table format Tree
28. 28. Physical Renderer (Cont) techonestop.in2 - Allows records to be displayed in different
ways on different platform ( Desktop vs Mobile) - Uses third-party controls (like JQuery
library) if required - Takes logical data and builds physical rendering of it in HTML using CSS
files - Provides a binding layer to presentation model, binds HTML elements with the
presentation model structures
29. 29. Scenarios of customizing the Physical Renderer - Show or hide a field based upon the
property value of physical renderer - Display records in different ways like carousel, table,
grid and many more - Platform specific look-and-feel like Desktop vs Mobile techonestop.in2
30. 30. Steps to customize Physical Renderer 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) Implement 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 physical renderer 4.4) Declare bindings to the Presentation Model 4.5) Add
custom method/s techonestop.in3
31. 31. Example Example: In Contact Form Applet, if Status field has any value, show
WorkPhoneNum#, else hide the field ** In our previous module, we have built one
presentation model JS file to capture the Status field value. Here we will write one physical
render JS file to build the user interface. techonestop.in3
32. 32. Step 1 Step 1: Verify the object class does not exist Checks whether the class has
already been implemented or not. This should be the first statement to avoid possible
conflicts. Syntax: if( typeof( SiebelAppFacade.customclassname ) === "undefined" ) {
Script for our example: // Verify same PhysicalRenderer is not defined yet
if( typeof( SiebelAppFacade.ShowHideFieldsPR ) === "undefined" ){ techonestop.in32

33. 33. Step 2 Step 2: Add the class to the siebel namespace All new classes must be added to
the SiebelAppFacade namespace. Use NameSpace() function of SiebelJS class to
accomplish this Syntax SiebelJS.Namespace( "SiebelAppFacade. customclassname" );
Script for our example: // Add the class to the SiebelAppFacade namespace
SiebelJS.Namespace( "SiebelAppFacade.ShowHideFieldsPR"); techonestop.in33
34. 34. Step 3 Step 3: Define the physical renderer file location and other dependencies if any
Define method identifies the module that Siebel Open UI uses to locate the physical renderer
file and all other dependent modules It must have a return statement like return "
SiebelAppFacade. customclassname" Syntax define (module_name
,list_of_dependencies,function); - Module name is physical renderer file name without file
extension (.js) - List_of_dependencies is an array of all dependent modules which are
required to run physical renderer properly. If there is no dependencies, keep it blank. Function identifies the function name that must return an object techonestop.in34
35. 35. Step 3 (cont..) Script for our example: // Define method to make sure Siebel Open UI
can identify the constructor and other dependent files
define("siebel/custom/ShowHideFieldsPR", ["order!3rdParty/jquery.signaturepad.min", "order!
siebel/phyrenderer"], function () { techonestop.in35
36. 36. Step 4 Step 4: Implement 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 physical renderer 4.4) Declare bindings to the Presentation Model 4.5) Add
custom method/s techonestop.in36
37. 37. Step 4.1 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. customclassname = ( function(){ --- Writ the code here--- return
customclassname; } ()); Script for our example: // Declare the ShowHideFieldsPR class as
function SiebelAppFacade.ShowHideFieldsPR = ( function(){ --- Write the code here--- return
ShowHideFieldsPR; } ()); techonestop.in37
38. 38. Step 4.2 Step 4.2: Inherit the super class constructor When Open UI calls the
constructor, it passes presentation model object. Our custom constructor uses this
presentation model object to instantiate all required methods and attributes Syntax function
customclassname ( pm ){ SiebelAppFacade.
customclassname.superclass.constructor.call( this, pm ); } Script for our example: // Call the
superclass constructor function ShowHideFieldsPM( pm)
{ SiebelAppFacade.ShowHideFieldsPM.superclass.constructor.call( this, pm ); }
techonestop.in38
39. 39. Step 4.3 Step 4.3: Declare the class as an extension of physical renderer Use
SiebelJS.extend() to declare the class as an extension of physical renderer Syntax
SiebelJS.Extend(customclassname,SiebelAppFacade.PhysicalRenderer); Script for our
example: //Extend the class so that it can access all prebuilt functions
SiebelJS.Extend( ShowHideFieldsPM, SiebelAppFacade.PhysicalRenderer );
techonestop.in39
40. 40. Step 4.4 Step 4.4: Declare bindings to the Presentation Model Includes binding to the
properties, declared in the Presentation Model Syntax This.GetPM().AttachPMBinding

41.

42.

43.

44.

45.

( <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 ); }; techonestop.in40
41. Step 4.5 Step 4.5: Add custom method/s Any method, specified in Init function or any
custom method we want to implement, add the script here Syntax: function
CustomMethod(){ --- Write the code here --- } techonestop.in41
42. Complete Script (Page 1 of 3) /*----------------------Physical Renderer to Show/Hide a
field----------------------*/ // Verify same PhysicalRenderer is not defined yet
if( typeof( SiebelAppFacade.ShowHideFieldsPR ) === "undefined" ){ // Add the class to the
SiebelAppFacade namespace
SiebelJS.Namespace( "SiebelAppFacade.ShowHideFieldsPR" ); // Define method to make
sure Siebel Open UI can identify the constructor and other dependent files
define("siebel/custom/ShowHideFieldsPR", ["order!3rdParty/jquery.signaturepad.min", "order!
siebel/phyrenderer"], function () { // Declare the ShowHideFieldsPR class as function
SiebelAppFacade.ShowHideFieldsPR = ( function(){ // Call the superclass constructor
function ShowHideFieldsPR( pm )
{ SiebelAppFacade.ShowHideFieldsPR.superclass.constructor.call( this, pm ); }
techonestop.in42
43. Complete Script (Page 2 of 3) // Attach PM Binding
SiebelAppFacade.ShowHideFieldsPR.superclass.Init.call(this);
this.AttachPMBinding( "ShowHideFieldsPM", ModifyLayout ); }; // 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(); } techonestop.in43
44. Complete Script (Page 3 of 3) else{ $( "div#WorkPhoneNum_Label" ).hide(); $( "[name='"
+ WorkPhoneNum.GetInputName() + "']" ).hide(); } } return ShowHideFieldsPR; } ()); return
"SiebelAppFacade.ShowHideFieldsPR"; }); } techonestop.in44
45. Highlights Physical Renderer is a Javascript file which is responsible to build user
interface. Steps to implement to 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) Implement 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 physical renderer 4.4) Declare bindings to the
presentation model 4.5) Add custom method/s techonestop.in45

Siebel Open UI Interview Questions:

1. Benefits of Siebel Open UI over Siebel HI
Click on link for Ans: What is Siebel Open UI and its benefits
2. How Siebel Open UI architecture is different from traditional Siebel architecture?
Click on link for Ans: Siebel Open UI Architecture
3. Give one example where you have used Presentation Model and Physical Renderer
Ans: Most Important, be prepare for it!
4. What is presentation model and explain its customization steps with an example?
Click on link for Ans: Customizing the Presentation Model
5. What is Physical Renderer and explain its customization steps with an example?
Click on link for Ans: Customizing the Physical Renderer
6. Difference between Presentation Model and Physical Renderer JS files
Ans: Do it by yourself!
7. Can we have Presentation Model without Physical Renderer or vice versa?
Ans: Yes
8. What is Siebel Open UI theme and how to build a custom one?
Click on link for Ans: Siebel Open UI Theme
9. What is Manifest file and how to configure it in Siebel Open UI?
Click on link for Ans: Customizing Manifest file
10. How Siebel Open UI behaves when Custom manifest matches with Predefined manifest?
Click on link for Ans: Customizing Manifest file (look at the end of article)
11. How to debug JS files in Siebel Open UI?
Click on link for Ans: Siebel Open UI Debugging
12. Have you followed any best practices during Siebel Open UI configuration?
Click on link for Ans: Definitely Yes! Siebel Open UI Configuration Best Practices
13. What is the purpose of using 'Define Method' ? Is it mandatory to mention 'Define Method' in
Presentation Model or Physical Render JS file?
Click on link for Ans: Presentation Model Methods - Siebel Open UI Application Configuration
Physical Renderer Methods - Siebel Open UI Application Configuration

14. Can we call Business Service from PM or PR JS file?

Ans: Yes
15. Can traditional browser script and Siebel Open UI PM/PR JS file work together?
Ans: Yes