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

So far we have discussed what is Siebel Open UI, its architecture, customization 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 properties 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.

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

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

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: