Customizing the presentation model and Physical Renderer in Siebel Open UI:This is our third tutorial on Siebel Open UI Training series.For open ui classroom/online training, please drop us mail admin@techonestop.com. For more information, click http://www.techonestop.com/2014/05/customizing-presentation-model-siebel-open-ui.html and http://www.techonestop.com/2014/06/customizing-physical-renderer-siebel-open-ui-training.html. For more updates on recent activities, follow 'TechOneStop' in Facebook/Twitter/LinkedIn.

1. Customizing The
Presentation Model
Presented by TechOneStop
Techonestop.in
In a vision to make TECHNOLOGY simple for u
techonestop.in1

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. 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. 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. 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. 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. 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 class-less language, though
functions can be used to simulate Class concept. Everything in javascript is
treated as object.
techonestop.in7

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. Example
Example: In Contact Form Applet, if Status
field has any value, show WorkPhoneNum#,
else hide the field.
techonestop.in9

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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. Customizing The Physical
Renderer
Presented by TechOneStop
Techonestop.in
In a vision to make TECHNOLOGY simple for u
techonestop.in2

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 ( “<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