Siebel Open UI Training

Date :30 Aug 2016

by,
Kathambari R
1

Contents

Siebel OUI Key components

Migration path for JS,webtemplate,CSS
Manifest Administration
Themes and customizing Themes

Siebel OUI key components

Application Object components(AOM).

Siebel web template (SWT) files.
Cascading style sheets(CSS) files.
Javascript(JS) Files.
Open UI Client.
Manifest files.

SWT Files
Provides placeholder for siebel views and applet layout.
Provides the framework on which HTML is constructed.
Open UI De coupled layout.
SWT, No longer contains explicit layout information.Use <div>
tags instead of explict alignment or frames to support CSS styling.
Folder structure for pre delivered files:
/siebsrvr/WEBTEMPL Original SWT files.
/siebsrvr/OUIWEBTEMPL Open UI SWT Files.
Can create subdirectory for custom files
-/siebsrvr/OUIWEBTEMPL/Custom

Cascading style sheets files

Contains set of styling rules to specify how the content in an HTML
document to be displayed.
Allows set of styling rules to apply to multiple web pages.
Folder structure:
\webmaster\files\<lang> and
\eappweb\PUBLIC\<lang>\FILES
Custom files can be placed by creating subdirectory in these
folders.
- This isolates these files from as delivered files and prevents
during upgrade.
In IP 2016,
Folder structure: Moved to lang Independent folder.
Ex: \eappweb\PUBLIC\<lang>\FILES

Java script files

Used for implementing Client side business and presentation logic.
Used by Open UI to render the application in a browser.
References CSS files as needed.
Custom files can be added to change application behaviour.
JS folder structure:
- \siebsrvr\pubic\<lang>\<build>\SCRIPTS HI js files
- Subdirectory contains all js for Open UI framework.
- 3rd party subdirectory contains all 3rd party controls.
In IP 2016, Folder structure : - \siebsrvr\pubic\<build>\SCRIPTS

Open UI client
Open UI Client:
- Utilizes a : Proxy, Presentation Model and Physical Renderer.
Proxy:
- Act as an interface to Siebel server.
- Creates shadow copy of BO,BC,Applet,etc.
PM:
- Works with proxy data.
- Determines what logic to be applied.
- Captures behaviour.(Click,hover on control etc..)
PR:
- Renders the UI.
- Uses different controls to display records in different ways.

Manifest Administration
Open UI in versions 8.1.1.9 or 8.1.1.10 (or 8.2.2.2 and 8.2.2.3
respectively),
- custom_manifest.xml
- manifest_extensions.map Register the applet/key combination.
From version 8.1.1.11 ,
- The administration of manifest files and their mapping to user
interface objects such as applets is done in the web client.

Manifest Administration
Three views in application,

Steps:
1. Write a custom extension class and save it in the custom folder
(same as before).
2. Register the relative path to the custom file in the Manifest Files
view.
3. (Optionally) create a logical expression in the Manifest
Expressions view.
4. Associate the UI object with a logical condition (using the
manifest expressions) and the custom file(s) in the Manifest
Administration view.
9

Step 2:Registering custom file in manifest files view:Javscipt

Events,keywords,
functions.

New record can be created for the custom file along the relative
path to the file.

10

Step 3 :Manifest Expressions

Expressions: They are statements evaluates to true or false.
These are pre built expressions. You can create your own custom
expressions.

11

Step 4 : Register UI Objects (Applet)

Ex: Contact list applet Registeration

12

Step 4:Register UI Objects (Applet)

After creating the parent record by specifying the type (e.g. "Applet") and
the usage type (e.g. "Physical Renderer");
Ex: The Contact List Appletis registered three times (for Physical
Renderer, Presentation Model and Web Template).

We must create at least one expression in the Objects Expressionslist.

- An expression group is a list of expressions which are evaluated in
a given sequence.
- You can choose between logical "AND" or "OR". In example
the Tilegroup evaluates to truewhen all three expressions ("Desktop",
"EditList" and "Tile") evaluate to true.

The Files list is then used to associate the file which should be loaded
when the selected expression evaluates to true.
- When these conditions are true, Tilescrollcontainer.jsfile will be
loaded.
According to applet mode , different web template can be configured.

13

Themes and customizing themes

Themes
- Collection of CSS files that implement a consistent look and
feel for the UI for a web application.
- Applies to all the pages.
Typically specifies the:
- Look and feel of various UI elements such as menu buttons.
- Location of various UI elements.
- A co ordinated set of colors,font styles and sizes and so forth.

14

Themes for Open UI

Siebel OUI delivered with set of Open UI themes.
Selection of theme:
- User can select the theme.
- Navigate to Tools>User preferences>Behaviour.
- select navigation control type.
- select the theme associated with control type.

15

Themes
As delivered themes are present in,
- theme.js file.
- Location: \siebsrvr\public\<lang>\build\SCRIPTS\ siebel folder in the siebel
installation directory.
- Themes are defined using
SiebelAPP.ThemeManager.AddTheme function
- Associate a specific set of CSS files with theme.
Ex: IP 2013:
SiebelAPP.ThemeManager.AddTheme(GRAY_TAB,{
CSS : {
Sb_theme : files/theme-base.css,
Sc_theme: files/theme-gray.css
},
objList : []
});

16

Addition of custom CSS to theme

Create CSS file.

Add styling rules or modify the existing rules.
Add this css file in custom theme.js file.
Use SiebelApp.ThemeManager.addResource function to add the
css file as shown below:

SiebelApp.ThemeManager.addResource(
GRAY_TAB,
{
css : {
ou_theme : files/custom/customcssfile.css
}
});

17

Customer created theme

Can Modify an existing theme or create new theme.
Custom themes are defined in theme.js in
../siebsrvr/public/<lang>/<build>/SCRIPTS/siebel/custom/in siebel
installation directory.
Isolate custom theme from those provided in siebel application.
Preserve customer modification during upgrades.
From IP 2014, We have the option to map css in manifest admin
screen,rather than in theme.js file. Creation of theme and mapping
css file all can be done in Manifest screen.

18

THANK
YOU

19