Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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.
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.