Presentation Model Customization (Siebel Open UI Training – Part 3)

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 >>

Watch our YouTube Video on Presentation Model Customization:

What is ActiveX

ActiveX is nothing but a small piece of code(better known as Add-ons), created by Microsoft. If you have Internet Explorer installed on your computer, then ActiveX is also installed. Purpose of this ActiveX is to improve the browsing experience but it only works with Microsoft applications like MS Word, Excel, PowerPoint, Internet Explorer.  The Idea behind ActiveX is that same piece of code can be used in more than one place.

For Example, a spell checker functionality is required in MS Word as well as in e-mail application like Microsoft Outlook. So instead of writing same code twice, write a spell checking functionality in one place (i.e Windows Operating System) and call spell checker object wherever it is required.
ActiveX technology started as Object Linking and Embedding (OLE). In earlier version of windows, OLE used for cross application functions like Cut , Copy, Paste. Now a day, OLE has been transformed into Compound Object Module (COM). Spell checker is an example of COMs. It is an independent program in windows which can be used by any windows applications. ActiveX control is another COM which is used in larger applications. 

For example, if you want to play flash files(.swf) in Internet Explorer, you need Adobe Flash player installed on your system first, as IE cannot play flash files directly. But if the whole website is built in flash and you don’t want to install Adobe Flash Player, then IE gives you an option to download and install Flash ActiveX at your OS level. After that IE can play the files in the browser itself.

As it is a piece of code, there is a risk of misuse also. Using ActiveX, applications/websites can access your personal information, also it could throw unwanted pop-ups. So before installing any ActiveX, make sure it is trust worthy.
How to install ActiveX ? 
When any application needs ActiveX control, IE displays a dialog box asking your permission to install, provided Pop-Up blocker option in IE level is not set to ‘Yes’. Right click on the dialog box and click on ‘Install ActiveX Control’ option to install it.

How to uninstall ActiveX ?
Open Internet Explorer and then goto Tools > Manage Add-ons option. You can see the list of all add-ons, installed in your system. Select the ActiveX control you want to delete and then either click on Delete option or Disable.  

SBL-EAI-08032: WSDL cannot be generated for Argument having Data Type ‘Hierarchy’

Error Message: WSDL cannot be generated for Argument having Data Type ‘Hierarchy'(SBL-EAI-08032)
    – This is another common issue in Siebel when you try to generate WSDL from web client 

Reason: You can not generate WSDL for the argument with data type ‘Hierarchy’

Solution: Here you have two options to fix it. You can choose one which is best suitable in your case.
    – Change the argument/property type from Hierarchy to Integration Object and try to generate WSDL
    – Add XML conversion step to change the XML hierarchy to Integration object. You can use BS ‘EAI Integration Object to XML Hierarchy Converter’ and method ‘XMLHierToIntObjHier’ or ‘EAI XML Converter’ with method ‘XMLHierToIntObjHier’.


If you want us to discuss about any error message on Siebel, please leave your comment here or submit the contact form with details.
To know more, follow ‘TechOneStop on Facebook / Twitter / LinkedIn / Goolge+ or join our website as follower.
Sharing is caring, so please share this article with your friends.

<< Error: SBL-EDC-00190                                                                                                      Error: SBL-DAT-00323 >>