Siebel Open UI Theme (Siebel Open UI Training – Part 6)

So far we have discussed what is Siebel Open UI, its architecturecustomization of Presentation Model, Physical Renderer and Manifest File. In this sixth module of Siebel Open UI training series, we will discuss about Siebel Open UI theme.

After you complete this module, you will know

– What is Cascading Style Sheet (CSS)

– What is Siebel Open UI Theme

– Siebel Open UI theme customization

So lets start with Cascading Style Sheet definition.

CSS file is

– a collection of styling rules that determine how HTML elements will be displayed on user interface

– reusable, one CSS file can be used to build multiple web pages

– easy to modify, you can update CSS rules only in one place and it will be referred in all web pages

– It provides consistent look and feel through out the application

– CSS rules consist of one or more property value pairs

Example:

Generic CSS rules                                                                      Open UI Specific CSS rules

h1 {                                                                                                   .applicationMenu {
color: blue;                                                                                              margin-left: 10px;
font-style: Italic;                                                                                     float: left;   }
text-align: center;   }                                                                     .header-top {
                                                                                                                  float: right;   }

Styling with CSS browser extensions:

– CSS browser extensions are browser specific style properties but not (yet) part of official CSS specification. Each browser has its own CSS extensions. Also styling rules for one browser do not work with other browsers.

– CSS extensions are definied by a dash (-), then browser short name (e.g. webkit, moz, ms, o), another dash and style name.

            Example: -webkit-text-shadow: 1px 1px 2px black or -moz-text-shadow: 1px 1px 2px black;

– Browser extensions enhance the interactivity features of web pages

– If the browser does not support any rule, it strikes through the rule

– Siebel Open UI CSS files can use browser extension propeSiebel Open Ui theme - Styling with CSS browser extensionsrties and values

We hope you got a fair understanding of CSS. To read more about CSS, click here: Cascading Style Sheet

Now what is Siebel Open UI Theme?

Siebel Open UI theme is a collection of SWT, JavaScript and CSS files used to build user interface. It defines the rules for UI elements like color, font size, style. As delivered Open UI application comes with a small set of themes. But web developers can build custom themes or update vanilla themes as per requirement. As delivered Siebel Open UI themes are characterized by application primary color (Gray or Tangerine) and navigation controls (Tab or Tree structure).

How an user can change a theme in Siebel Open UI application?

Well, to change a theme

– Login into Siebel Open UI Application

– Navigate to Tools > User Preferences > Behavior

– Choose Navigation Control – Tab or Tree

– Choose Theme – Gray or Tangerine

– Logout and Login again to see the new theme

If the new theme is not applied after logout-login, clear all historical data from the browser and reload the application again.

To modify existing theme or create a new theme, you could

– Add new or modify existing Siebel Web template files (SWT)

– Add new or modify existing JavaScript and JQuery

– Add new or modify existing Cascading Style Sheet

To keep this article simple, we will use CSS only to modify an existing theme and create a new Open UI theme. Advanced customization (Add or modify JavaScript, JQuery, SWT files) of Siebel Open UI theme will be discussed in our next article.

Where to keep all custom files like SWT, JS or CSS during Siebel Open UI theme customization?

SWT File:

– It is advisable not to update any out of box SWT file. If you have to modify any out of box SWT file, copy it first and then update it. You keep all custom SWT files under siebsrvr_root\WEBTEMPL\ OUIWEBTEMPL\custom in Siebel server.

– To render user interface, Siebel Open UI looks for SWT file

  • first under the directory siebsrvr_root\WEBTEMPL\OUIWEBTEMPL\custom
  • If not found, then siebsrvr_root\WEBTEMPL\OUIWEBTEMPL
  • If not found, then siebsrvr_root\WEBTEMPL\custom
  • If not found, then siebsrvr_root\WEBTEMPL

JavaScript File:

– Out of Box JavaScript files are located under SWEApp\PUBLIC\files\SCRIPTS\siebel

– Keep all custom JS files under SWEApp\PUBLIC\files\SCRIPTS\siebel\custom

– Like SWT file, do not update any vanilla JavaScript file directly, copy it first and then update it

CSS File:

– As delivered Siebel Open UI CSS files are located under SWEApp\PUBLIC\files folder

– 3rd Party provided CSS files are located under SWEApp\PUBLIC\files\3rdParty

– Place all custom CSS files under SWEApp\PUBLIC\files\custom folder to avoid issues during application upgrade

Now how will you decide that creating a new theme is better option or just modify existing Siebel Open UI theme?

If your new theme slightly differs from as-delivered theme, then modify the existing Siebel Open UI theme. You can copy vanilla CSS files, modify it as per requirement and place it under CUSTOM folder. But if the new theme differs significantly from as-delivered Open UI theme, create new style sheet file/s altogether.

For example, if it is just font size or font color change, modify existing CSS file. But if you want your Open UI application looks like Facebook, build a new CSS file.

Now first we will discuss steps to modify an existing Siebel Open UI theme and then create a new theme.

Steps to modify an existing Siebel Open UI theme:

  1. Identify the styling rules
  2. Modify rules inline and test it
  3. Modify or build the CSS file
  4. Add the CSS file to the theme
  5. Test the modified theme

1. Identify the styling rules

– Use ‘Inspect Element’ browser tool to identify CSS rules and sequence.

– Almost every modern browser has ‘Inspect Element’ tool to verify various elements of web pages.

Example: In Google Chrome, right click on any web page and choose ‘Inspect’ option to see all HTML, CSS, JavaScript objects used to build the web page

– Inspector displays all rules in the order of priority. If a CSS property appears in multiple rules, then the property value from the highest priority rule will be applied. Inspector element strikes through the text to designate that the property is not applied.Siebel Open UI theme customization

2. Modify rules inline and test it

– Use ‘Inspect Element’ developer tool to modify existing rules or add new CSS rules from the browser.

– It enables you to test changes immediately on the browser without modifying the actual CSS file

– Copy all custom CSS rules and check the CSS file name. File name appears under ‘Styles’ tab on top right hand corner.

– Once you refresh the webpage, all inline custom changes will be removed.

3. Modify or build CSS file

– If it is small CSS change, you can modify vanilla CSS file/s directly. You can also copy the vanilla CSS file, paste it in ‘Custom’ folder and update it.

– If you want to create a completely new CSS file,  copy-paste entire set of CSS rules into one text file and save the file with .CSS extension. 

4. Add the CSS file to the theme

– If you modify the vanilla CSS file, no need to define the file in theme.js. You can go to Step 5 to verify changes.

– If it is new CSS file, then you have to register it in theme.js file. You must use an unique id to define the CSS file in theme.js file.

– Register new CSS file using SiebelApp.ThemeManager.addTheme function

Example: SiebelApp.ThemeManager.addTheme(
                     “GRAY_TAB”, {
                             css : {
                             red_tab_theme : “files/theme-red-tab.css”,
                             }, objList : [] });

5. Test the modified theme

– Clear browser cache

– Login into Siebel Open UI application and verify all changes

– Use ‘Inspect Element’ to verify that all new CSS rules have been applied

Next we will discuss how to build a new Siebel Open UI theme altogether.

Steps to build new Siebel Open UI theme:

  1. Create new CSS file/s
  2. Define the new theme
  3. Add the new theme to the Theme List of Values
  4. Verify the custom theme

1. Create new CSS file/s

– You know, if the custom theme differs significantly from as-delivered Open UI theme, it is better to create new style sheet file/s.

– To create the new CSS file, use ‘Inspect Element’ browser tool – add or edit CSS rules inline, test all rules and then copy-paste the entire set of rules into new CSS file.

2. Define the new theme

– Every theme has to be defined in theme.js file. To avoid theme related issues during application upgrade, add all custom themes under \custom\theme.js file.

– Add the new theme using SiebelApp.ThemeManager.addTheme function

– You can can include all custom CSS files as well as vanilla CSS files

Example: SiebelApp.ThemeManager.addTheme(
                     “RED_TAB”, {
                                     css : {
                                               sb_theme : “files/theme-base.css”,
                                               sc_theme : “files/theme-gray.css”,
                                               sn_theme : “files/theme-nav-tab.css”,
                                               sca_theme : “files/theme-calendar.css”,
                                               red_tab_theme : “files/theme-red-tab.css”,
                                               sd_theme : IE8inc
                                               }, objList : [] });

3. Add the new theme to the Theme List of Values

– To display the new theme under Tools >User Preferences >Behavior > Theme, add the theme to the theme list of values

– Navigate to Administration-data> List of values and create a new record with below specification
                                        Type = OUI_THEME_SELECTION
                                        Display Value = Any value of user’s choice
                                        LIC = theme name as it is in theme.js
                                        Parent LIC = NAVIGATION_TAB or NAVIGATION_TREE

– Clear the cache

Open UI theme

4. Verify the custom theme

–  Clear browser cache

– Login into Siebel Open UI application and select the new theme from Tools >User Preferences >Behavior > Theme

– Refresh the application and verify all changes

Siebel Open UI theme customization

This end our sixth module on Siebel Open UI theme.

If you have any question, please feel free to comment below.

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.

<< Module 5: Manifest File Customization                     Module 7: Debugging in Siebel Open UI >>

Watch our YouTube Video on Manifest File Customization:

Manifest File Customization (Siebel Open UI Training – Part 5)

In this fifth module of Siebel Open UI training series, we will discuss about Manifest File customization. Once your Presentation Model and Physical Render JS files are ready, next step is to embed these JS files with Siebel objects like applets, views or screens. In our last couple of modules, we have discussed about customization of Presentation Model and Physical Render.

After you complete this module, you will know

– What is Manifest File

– It’s role in Siebel Open UI application configuration

– Manifest File Customization steps

So lets start our discussion with Manifest File definition.

What is Manifest file in Siebel Open UI?

In Siebel Open UI, Manifest file identifies the JavaScript files that must be downloaded from Siebel server to client machine to render user interface like screens, views or applets.

Here we will discuss how to configure manifest file on Siebel Open UI 8.1.1.11. There is a difference in manifest file customization between 8.1.1.11 and prior version of 8.1.1.11. Before 8.1.1.11, there were two manifest files located under ../siebsrvr/OBJECTS.

core_manifest.xml  contains the rendering keys for vanilla application

custom_manifest.xml contains custom rendering keys

For any addition or deletion of PM or PR files, you had to update custom_manifest.xml file.

But from Siebel Open UI  8.1.1.11 and 8.2.2.4 onward, you don’t modify these two manifest files any more. You will configure manifest file from client itself without scripting. This is a major improvement that Oracle has introduced from Siebel Open UI IP 2013 onward.

Steps for Manifest File Customization:

1) Verify Presentation Model and Physical Renderer JS files include Define method

2) Register all custom JS files

3) Configure Manifest Administration

4) Verify customization

Note: All these steps are applicable from Siebel Open UI 8.1.1.11 onward.

Step 1: Verify Presentation Model and Physical Renderer JS files include Define method

– You can use any JavaScript editor to open custom PM and PR JS files and verify ‘Define’ method is declared or not.

– Define method should include the file name with relative file path and without .js extension. You will use the same file path to register the JS file in next step.

Step 2: Register all custom JS files

– Log in to Siebel Open UI application and navigate to Administration – Application > Manifest Files

– Query for the custom JS files on ‘Manifest Files’ view

If not available, create a new record to register the JS file. File name must be same as ‘Define’ method but with .js extension.

Step 3: Configure Manifest Administration

– Associate the JS files with Siebel Open UI objects like Applet, View, Screen

  • Navigate to Administration – Application > Manifest Administration and create new UI object. It will tell Siebel Open UI engine to download all JS files when that particular object is loading on UI.
  • Every UI object has three parameters – Type, Usage Type and Name.
  • By default all UI objects are active. To inactivate any particular object, mark ‘Inactive Flag’ as ‘Y’.

– Configure the group under ‘Object Expression’ tab

  • It decides how to download JS files and in what sequence
  • You can write simple or complex expression using AND/OR operators

– Specify the files

  • If you have added more than one expression under ‘Object Expression’ tab, then make sure you have selected the correct expression.
  • Click on ‘Add’ button on the ‘File’ tab to get the file list
  • Query the file name and click OK to add it with Siebel object

Step 4: Verify Customization

– Do ‘Clear Cache’ and reload the browser to verify all changes

– You can use browser tool ‘Inspect Element’ to see all files have been downloaded properly or not.

You may face errors on the Step 4 – Verify Customization.
But don’t worry!! we will discuss about debugging techniques in our last module – Debugging in Siebel Open UI.

This ends our Manifest File Customization module.

However we would like to share an interesting question that one of our readers faced in Siebel Open UI interview. Question was ‘how does Siebel Open UI behave when custom manifest record matches with vanilla manifest record?’

If the custom manifest record and vanilla manifest record have same values for Type, Usage Type and Name fields on UI object applet, Siebel Open UI gives priority to custom manifest. If you want to download all files from both vanilla manifest and custom manifest, then either add all custom files with vanilla manifest record and delete custom manifest or add all files with custom manifest record.

There are few exceptional cases as well, we will discuss those in later module.

To know more about Siebel Open UI interview question, read our article: Siebel Open UI Interview Questions

Also you can take our Siebel Open UI quiz – Siebel Open UI Quiz 

If you have any question about Manifest File Customization, Please feel free to comment below.

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.

<< Module 4: Physical Renderer Customization                      Module 6: Siebel Open UI Theme >>

Watch our YouTube Video on Manifest File Customization:

Physical Renderer Customization (Siebel Open UI Training – Part 4)

In the fourth module of Siebel Open UI training series, we will discuss about Physical Renderer Customization. If you didn’t read our previous article on Presentation Model Customization, we would suggest you to read that first. It will help you to understand this article better as Presentation Model and Physical Renderer are interrelated.

After you complete this module, you will know

– What is Physical Renderer

– It’s role in Siebel Open UI

– Physical Renderer Customization steps

So, lets start our discussion with Physical Renderer definition.

What is Physical Render in Siebel Open UI?

– Like Presentation Model, Physical Renderer is also a client side JavaScript file. It binds HTML elements with Presentation Model.

– It is responsible to build user interfaces. It takes logical data and does physical rendering of it in HTML using CSS files.

– Physical Renderer can use third-party controls like JQuery library

– It can display same set of records in different ways on different views

  • List Applet
  • Form Applet
  • Carousel
  • Calendar
  • Table format
  • Tree

– It allows records to be displayed in different ways on different platforms like Desktop, Mobile

Few business scenarios where you can use Physical Renderer Customization:

– Display or hide a field based on the property value of Presentation Model

– Display records in different ways like carousel, table, grid

– When your application needs platform specific look-and-feel like Desktop or Mobile

We will take the same example that we have used in Presentation Model customization, to discuss Physical Renderer Customization steps also. Our example was – on Contact Form Applet, if Status field has any value, show the field ‘WorkPhoneNum#’ else hide it. In our previous module, we have built a Presentation Model JS file to capture the Status field value. Here we will write a Physical Render JS file to build the user interface.

Steps for 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) Add 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 default Physical Renderer

4.4) Declare bindings to the Presentation Model

4.5) Add script for custom method/s

Step 1: Verify the object class does not exist

– Like Presentation Model, first 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 class is not defined yet
if( typeof( SiebelAppFacade.ShowHideFieldsPR ) === “undefined” ){

Step 2: Add the class to the Siebel namespace

– Every class must be added to the ‘SiebelAppFacade’ namespace

– Use NameSpace() function of SiebelJS class to do this

Syntax:

SiebelJS.Namespace( “SiebelAppFacade.custom_class_name” );

Script for our example:

// Add the class to the SiebelAppFacade namespace
SiebelJS.Namespace( “SiebelAppFacade.ShowHideFieldsPR” );

Step 3: Define the Physical Renderer file location and other dependencies if any

– ‘Define’ method identifies the modules that Siebel Open UI uses to locate the Physical Renderer 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 nothing but the Physical Renderer file name with file path but without file extension.

List_of_dependencies is an array of all dependent modules that are required to run Physical Renderer properly. If there is no dependency, keep it blank.

Function identifies the function name that must return an object.

Script for our example:

// Define the Physical Renderer file location and other dependencies if any
define(“siebel/custom/ShowHideFieldsPR”, [“order!3rdParty/jquery.signaturepad.min”,
“order!siebel/phyrenderer”], function () {

Step 4: Add a 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 Physical Renderer

4.4) Declare bindings to the Presentation Model

4.5) Add custom method/s

Step 4.1. Declare the class constructor as function

– Declare the class constructor as a child object 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 ShowHideFieldsPR class as a function
SiebelAppFacade.ShowHideFieldsPR = ( function(){
— Write the code here—
return ShowHideFieldsPM; } ());

4.2) Invoke the super class constructor

– When Open UI calls the custom constructor in Physical Renderer JS file, it passes Presentation Model objects. Custom constructor uses these objects to instantiate all required methods and attributes.

Syntax:

function custom_class_name ( pm ){
SiebelAppFacade. custom_class_name.superclass.constructor.call( this, pm );
}

Script for our example:

// Call the super class constructor
function ShowHideFieldsPR( pm ){
SiebelAppFacade.ShowHideFieldsPR.superclass.constructor.call( this, pm ); }

4.3) Declare the class as an extension of default Physical Renderer

– Use SiebelJS.extend() to declare the class as an extension of Physical Renderer

Syntax:

SiebelJS.Extend(custom_class_name, SiebelAppFacade.PhysicalRenderer);

Script for our example:

//Extend the class so that it can access all pre built functions
SiebelJS.Extend( ShowHideFieldsPR, SiebelAppFacade.PhysicalRenderer );

4.4) Declare bindings to the Presentation Model

– Bind the Presentation Model properties with custom class/methods

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

4.5) Add scripts for 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:

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();
}

else{

$( “div#WorkPhoneNum_Label” ).hide();
$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).hide();
}

}

Here is the complete script used in the example:

/*————————— Physical Renderer Customization to Show/Hide a field ————————*/

// Verify same Physical Renderer Class is not defined yet

if( typeof( SiebelAppFacade.ShowHideFieldsPR ) === “undefined” ){

// Add the class to the SiebelAppFacade namespace

SiebelJS.Namespace( “SiebelAppFacade.ShowHideFieldsPR” );

// Define the Physical Renderer file location and other dependencies if any

define(“siebel/custom/ShowHideFieldsPR”, [“order!3rdParty/jquery.signaturepad.min”, “order!siebel/phyrenderer”], function () {

// Declare the ShowHideFieldsPR class as function

SiebelAppFacade.ShowHideFieldsPR = ( function(){

// Call the super class constructor

function ShowHideFieldsPR( pm ){
SiebelAppFacade.ShowHideFieldsPR.superclass.constructor.call( this, pm );
}

//Extend the class so that it can access all pre built functions

SiebelJS.Extend( ShowHideFieldsPR, SiebelAppFacade.PhysicalRenderer );

// Attach PM Binding

SiebelAppFacade.ShowHideFieldsPR.superclass.Init.call(this);

this.AttachPMBinding( “ShowHideFieldsPM”, ModifyLayout );

};

// Add script for 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();

}

else{

$( “div#WorkPhoneNum_Label” ).hide();

$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).hide();

}

}

return ShowHideFieldsPR;

} ());

return “SiebelAppFacade.ShowHideFieldsPR”;

});

}

Like Presentation Model Methods, there are few frequently used Physical Renderer Methods also. To know more, read our article on Physical Renderer Methods.

This ends our Physical Renderer Customization module.

If you have any question about Physical Renderer Customization, Please feel free to comment below.

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.

<< Module 3: Presentation Model Customization       Module 5: Manifest File Customization >>

Watch our YouTube Video on Physical Renderer Customization:

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:

Siebel Open UI Architecture (Siebel Open UI Training – Part 2)

In our previous article, we have discussed about what is Siebel Open UI and its benefits. Here we will talk about Siebel Open UI Architecture and its various building blocks. Also we will discuss architectural difference between Siebel HI and Open UI client.

Siebel Open UI Architecture key components:

It includes all components of traditional Siebel client, plus Open UI specific components.

  1. Application Object Manager(AOM)
  2. Siebel Web Template(SWT) file
  3. JavaScript(JS) file
  4. Cascading Style Sheet (CSS) file
  5. Open UI client
    – Proxy
    – Presentation Model
    – Physical Renderer
  6. Manifest file

We will discuss all these one by one.

1. Application Object Manager (AOM)

– This is the most important server component. In Open UI, it behaves exactly the same way like our traditional Siebel client. AOM processes user requests with the help of other components like Data Manager, Siebel Web Engine.

– In our previous module, we have already discussed that below two parameters must be set to TRUE for Open UI Object Manager component.

EnableOpenUI = TRUE
HighInteractivity = TRUE

Our Recommendation: Instead of updating the existing object manager directly, copy it and add above two parameters to enable Open UI mode . Also you create a new virtual directory in Siebel Web Server to support Open UI Object Manager.

2. Siebel Web Template(SWT) file

– Siebel Web Template file defines the layout and format of the elements to display on UI. It provides the placeholders for Siebel objects like views, applets, controls but does not contain any data. These SWT files are nothing but HTML files with Siebel tags. Siebel Open UI uses newer version of SWT files that no longer contain any explicit layout information.

Original SWT file has explicit tags like tables, boundaries where Open UI SWT file has ‘div’ tag. It allows CSS files to control the layout.

– SWT files are located under \siebsrvr\WEBTEMPL

  • WEBTEMPL folder contains original SWT files
  • OUIWEBTEMPL folder, inside WEBTEMPL contains Open UI related SWT files
  • CUSTOM folder, inside OUIWEBTEMPL contains all custom SWT files

To know more about Siebel Web Template, read this: Overview of Siebel Web Templates

3) Cascading Style Sheet (CSS) file

– CSS is a style language that defines the layout of web pages, such as font, color, height, width

– Benefits of CSS:

  • Reusable, one CSS file could be used for multiple web pages
  • Modify style definition in one place and change will be reflected in all web pages
  • Different layout for different media types like mobile, desktop
  • Easy to build, notepad is sufficient to write css file

– Open UI uses CSS to build the layout of HTML files dynamically.

– CSS files are located in the web server under \webmaster\files\<lang> and \eappweb\PUBLIC\<lang>\FILES.

– For Siebel developer client, path is \client\PUBLIC\<lang>\files.

4) Java Script (JS) file

– JavaScript is a client side programming language used in web applications. It enhances the users experience of the web pages.

– In Siebel Open UI, JS files are used to add client side businessand validation and render the application in the web browser

– Oracle provided JS files deliver out of box functionalities. Developers can build custom JS files to leverage the functionalities.

– Beside Javascript, developers can use JQuery also.

– JS files are located in Siebel Server under \siebsrvr\public\<lang>\<build>\SCRIPTS

  • SCRIPTS folder contains original (High Interactivity) JS files
  • siebel folder, under SCRIPTS contains Open UI related vanilla JS files
  • custom folder, under \SCRIPTS\siebel contains all custom js files
  • 3rdparty folder, under SCRIPTS contains all 3rd party provided js files

– For Siebel developer client, JS files are located in \client\<lang>\<build>\SCRIPTS

Note: Traditional browser script is different from Open UI related JavaScript. Developers can use both in Siebel Open UI. But Oracle recommends to use JavaScript only for client side validation.

5) Siebel Open UI client:

– Open UI client is a Siebel engine that runs within the browser to enhance user experience and data validation

  • Binds data to the presentation layout
  • Caches data locally
  • Applies client side business logic

– It consists of 3 elements

  • Client Proxy
  • Presentation Model (PM)
  • Physical Renderer (PR)

5.1) Client Proxy

– It works as an interface to the Siebel Server.

– It gets run-time data and metadata from Siebel server and passes it to Presentation Model.

  • Run-time data is the actual data from Siebel database that users see in views/applets
  • Metadata specifies the column name and other details like required, readonly

– It is Oracle provided and must not be modified by users.

5.2) Presentation Model

– It is a JavaScript file that determines what business logic to be applied on metadata and run-time data coming from Siebel server.

– It captures client interactions such as

  • Did the user leave a control?
  • Did the user click on the link?

– It is collection of Properties and Method

  • Properties: 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.

– It supports different logic for different platforms

5.3) Physical Renderer

– It is a JavaScript file that Open UI uses to render application on the browser
– It can display the same set of records in different ways

  • List Applet
  • Carousal
  • Calendar
  • Mind Map

– Like Presentation Model, it also supports different behaviors for different devices like Desktop, Mobile

6) Manifest file

– It uses an unique key to determine which JavaScript file/s to download to the client

– Earlier version of Siebel Open UI Innovation Pack 2013 (8.1.1.11) has three manifest files under \seibsrvr\OBJECTS directory

  • Core_manifest.xml: As delivered listing of JS files and should not be modified by developers
  • Custom_manifest.xml: It specifies the key name and JavaScript file mapping
  • Manifest_extensions.map: It is the place to register Applet/key combination

– From Open UI Innovation Pack 2013, you do not need to modify manifest file anymore. Rather you configure it from Open UI client itself – Administration-Application||Manifest Administration.

We will discuss more about Presentation Model, Physical Renderer and Manifest File in subsequent modules.

Graphical presentation of Siebel High Interactivity Architecture Vs Siebel Open UI Architecture (Source: Oracle)

Siebel Open UI Architecture

Major changes in Siebel Open UI Architecture:

  1. Open UI supports all modern browsers, not just Internet Explorer
  2. ActiveX controls are replaced by JavaScript controls
  3. ActiveX proxy is replaced by JavaScript proxy
  4. In Siebel Open UI Architecture, layout is not part of Siebel Web Templates any more

So far we have discussed various building blocks of Siebel Open UI Architecture and how it differs from Siebel HI client. If you have any doubt, please fell free to comment below.

Next we will discuss the architectural flow with an example – Navigating to My Opportunities view. Suppose you have clicked on ‘My Opportunities’ to open My Opportunities View. Now Siebel Open UI performs below steps to render ‘My Opportunities View’ on the browser.

Step 1: Presentation Model passes the request to the client proxy

Step 2: Proxy sends the request to Siebel Server

Step 3: Siebel Server processes the request and sends the result back to proxy

Step 4: Proxy reads the manifest file and downloads all required JS files

Step 5: Presentation Model applies the business logic on the result set and sends it to Physical Renderer

Step 6: Physical Renderer prepares the final HTML file with the reference of CSS files

Step 7: Result is displayed on the browser

Step 1: Presentation Model passes the request to the client proxy

– Presentation Model captures the event ‘on mouse click’ and sends the request to client proxySiebel Open UI Architecture - Examples-Step 1

Step 2: Proxy sends the request to Siebel Server

– First proxy checks the client cache memory for the necessary data to fulfill client request

– If required data is available in the cache memory, it directly goes to Step 4. Otherwise proxy sends the request to Application Object Manager on Siebel Server to get the record set.Siebel Open UI Architecture - Examples-Step 2

Step 3: Siebel Server processes the request and sends the result back to proxy

– Application Object Manager processes the request and sends back the record set to proxy

– Record set contains metadata and runtime data

  • Metadata: Object definitions like Columns, Applets, Views
  • Runtime data: Actual user data from Siebel databaseSiebel Open UI Architecture - Examples-Step 3

Step 4: Proxy reads the manifest file and downloads all required JS files

– Proxy reads the manifest file and downloads all JS and corresponding CSS files to display opportunity records.Siebel Open UI Architecture - Examples-Step 4

Step 5: Presentation Model applies the business logic on the result set and sends it to Physical Renderer

– Once data is received and files are downloaded, Proxy sends the notification to Presentation Model

– Presentation Model executes JS files to apply business logic on received dataSiebel Open UI Architecture - Examples-Step 5

Step 6: Physical Renderer prepares the final HTML file with the reference of CSS files

– Presentation model sends the notification to Physical Renderer to generate HTML files with the reference of CSS files.Siebel Open UI Architecture - Examples-Step 6

Step 7: Result is displayed on the browser

– The final HTML page ‘My Opportunities View’, embedded with JavaScript, CSS and Data, is displayed on the browser.Siebel Open UI Architecture - Examples-Step 7

This ends our module 2 on Siebel Open UI Architecture. Hope you have got a fair understanding!

If you have any question regarding Siebel Open UI Architecture, Please feel free to comment below.

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.

<< Module 1: Siebel Open UI and its benefits   Module 3: Presentation Model Customization >>

Watch our YouTube Video on Siebel Open UI Architecture:

Siebel Open UI Training (Part 1): What is Siebel Open UI and its benefits

Welcome to Siebel Open UI training! Over the next 10 modules, we will discuss

  1. What is Siebel Open UI and its Benefits
  2. Siebel Open UI Architecture
  3. Presentation Model Customization
  4. Physical Render Customization
  5. Manifest File
  6. Siebel Open UI Theme
  7. Siebel Open UI Debugging
  8. Presentation Model Methods
  9. Physical Renderer Methods
  10. Siebel Open UI Configuration Best Practices

To watch Siebel Open UI training videos, click here: Siebel Open UI Tutorial

So lets start our Siebel Open UI training with a question – what is Siebel Open UI?

Siebel Open UI is a browser client for Siebel desktop and mobile application. To open prior version of Siebel Open UI application, you must have Internet Explorer installed in your system. But as per latest browser trends (Nov 2014-Nov 2015) done by StatCounter, Google Chrome has the largest market share (almost 50%) followed by IE and Firefox. So to give browser flexibility to users, Oracle introduces Siebel Open UI. Siebel Open UI is browser and device independent Siebel client. It does not use ActiveX control. Also it has highly optimized and smart UI for mobile devices.

Siebel Open UI Benefits:

1. Improved User Interface

Traditional Siebel user interface is driven by web template files (SWT) and Cascading Style Sheets (CSS). Except SWT and CSS, Open UI supprots Javascript as well as JQuery. In Siebel Open UI, redesigned user interface has modern look and feel, new controls (such as MVG, Picklist, Calendar, Calculator), better tab navigation. Open UI supports internet browser functions also like Print, Zoom, Find, Bookmarking.

2. Device and Platform Independent

Siebel Open UI is completely device, platform and browser independent application. To run Siebel HI application, you have to have Internet Explorer installed with ActiveX. But Siebel Open UI does not need ActiveX. Also it can run on any modern browser like IE, Google Chrome, Firefox, Safari that supports JavaScript.

3. Mobility

Siebel Open UI has the capability to adjust screen length dynamically for different devices like tablets or smartphones. It has out of box integration with mobile functions like GPS, Email, Calendar sync, Calls, Multi touch gesturing.

4. Shorter Development Cycle

This is one of the major Siebel Open UI advantages over traditional Siebel application. Open UI supports client side customization on run time. It allows to add JavaScript for field validation, business service calling and application layout change. As JavaScript is client side customization, it does not need SRF compilation. You can use JavaScript APIs to manipulate Siebel data like display one field based upon another field value on run time. This repository independent development makes Siebel Open UI more interesting.

You can use browser tools like Inspector, Debugger to develop and test CSS and JavaScript. We will discuss more about browser tools in later module (Siebel Open UI theme).

All these enhanced features help developers to customize application quickly and more efficiently.

With Innovation Pack 2013, Oracle has introduced Incremental Repository Merge that accelerates repository upgradation process without going through major upgrade project.

IRM is not part of our Siebel Open UI training series. To read more about IRM, click here: Incremental Upgrade of Siebel Innovation Pack 2013

To read more about common errors during IRM, click here: Siebel Incremental Repository Merge – errors that we faced

5. Enhanced Out Of Box feature

Siebel Open UI comes with many built in features like

  • escape key to undo
  • disable right click to increase user experience
  • less use of horizontal scrollbar
  • supports GPS, Google Maps, Email

6. Support custom theme

By default open UI comes with two themes – Tabbed and Tree (Accordion). You can add custom theme or modify out of box themes as per requirement. Users can choose their favorite theme from Tools > User Preference.

So don’t get surprise if your boring Siebel application looks like Facebook from tomorrow! We will discuss about Siebel Open UI theme in later module.

Beside Siebel Open UI benefits, there are few limitations as well.

  • It does not support automatic logout on closing the browser
  • It does not do implicit commit on browser back button click
  • It does not allow to edit attachment content on the fly. Users have to download the file, update, save and upload the modified file again.
  • It does not support Standard Interactivity(SI) applet. Wherever SI Applet comes in the application, you will see a message box ‘Why can’t I see this applet‘.

To enable Siebel Open UI, parameters ‘EnableOpenUI‘ and ‘HighInteractivity‘ must be set to ‘True‘.

If you are using Web client, follow below steps to verify parameters’ values:

  • Login into Siebel application as an Administrator
  • Navigate to Application-Server Configuration and select the server on Servers view
  • Query for the Application Object Manager (AOM) component on Component view for which you want to enable Open UI mode
    • EnableOpenUI = TRUE
    • HighInteractivity = TRUE
  • In the Component Parameter view tab, query below two parameters and update values as ‘TRUE
  • Logout from the application and restart Siebel Server

For dedicated client, add these two parameters in the client cfg file.

If your Siebel Open UI application is not properly configured, you may face this error – ‘Your version of the Siebel High Interactivity Framework for IE, required for use of this Siebel application, may not be current‘. This message pops up when your application is not running in Open UI mode.

Key takeaways from the first module of Siebel Open UI training series:

1) Siebel Open UI is device, platform and browser independent web application

2) It enables developers to do repository independent customization

3) Siebel Open UI benefits

  • Improved User Interface
  • Device and Platform Independent
  • Mobility
  • Shorter Development Cycle
  • Enhanced Out Of Box feature
  • Support custom theme

4) To enable Open UI mode, you must set below two parameters to TRUE

               EnableOpenUI = TRUE

               HighInteractivity = TRUE

If you have any question about Siebel Open UI training, Please feel free to comment below.

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.

                                                                                                 Module 2: Siebel Open UI Architecture >>

Watch our YouTube video on ‘Siebel Open UI Training (Part 1): What is Siebel Open UI and its benefits’