D80347GC21 SG

Unauthorized reproduction or distribution prohibited Copyright 2015, Oracle and/or its affiliates
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Siebel Open UI Foundations

Student Guide
D80347GC21
Edition 2.1 | March 2015 | D90724
Learn more from Oracle University at oracle.com/education/
Author
Copyright 2015, Oracle and/or its affiliates. All rights reserved.
Customer Experience (CX)
Disclaimer
Curriculum Team
Technical Contributors
and Reviewers
Customer Experience (CX)
This document contains proprietary information and is protected by copyright and other
intellectual property laws. You may copy and print this document solely for your own use
in an Oracle training course. The document may not be modified or altered in any way.
Except where your use constitutes "fair use" under copyright law, you may not use, share,
download, upload, copy, print, display, perform, reproduce, publish, license, post,
transmit, or distribute this document in whole or in part without the express authorization
of Oracle.
Team
Publisher
Syed Imtiaz Ali
The information contained in this document is subject to change without notice. If you find
any problems in the document, please report them in writing to: Oracle University, 500
Oracle Parkway, Redwood Shores, California 94065 USA. This document is not warranted
to be error-free.
Restricted Rights Notice
If this documentation is delivered to the United States Government or anyone using the
documentation on behalf of the United States Government, the following notice is
applicable:
a
s
a
)h
m
co de
e
r
u Gui
t
n
Trademark Notice
cce dent
a
Oracle and Java are registered trademarks
@owners.ofSOracle
tu and/or its affiliates. Other names
y
may be trademarks of their respective
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
U.S. GOVERNMENT RIGHTS
The U.S. Governments rights to use, modify, reproduce, release, perform, display, or
disclose these training materials are restricted by the terms of the applicable Oracle
license agreement and/or the applicable U.S. Government contract.
Contents
Course Introduction
Lesson Agenda 1-2
Instructor and Class Participants 1-3
Training Site Information 1-4
Course Audience 1-5
Course Prerequisites 1-6
Course Goal 1-7
Course Objectives 1-8
Course Methodology 1-9
Course Materials 1-10
Information Sources 1-11
Other Sources 1-12
Course Agenda 1-13
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
2 Introducing Siebel Open UI kc

us
n
o
t
Objectives 2-2
ya nse
a
Siebel Open UI 2-3
(m lice
y
e
Siebel Open
le 2-5
ndUI Benefits
b
a
a
r
NativePBrowserfe
Support
2-6
k
s
n
an Support 2-7
yaMobile-trDevice
a
M nUpdated
on Look 2-8
Enhanced User Experience 2-9
Responsive Web Design 2-10
Client-Side Customizations 2-13
Large Community of Developer Resources 2-14
Customizing Siebel Open UI 2-15
Change the Overall Look and Feel 2-16
Change the Way Data is Presented 2-17
Using JavaScript Controls 2-18
Add Client-Side Logic 2-19
Siebel Tools 2-20
JavaScript 2-21
Considerations 2-22
Lesson Highlights 2-25
Practice 2-26
iii
Siebel Open UI Architecture

Objectives 3-2
Siebel Open UI Key Components 3-3
Application Object Manager (AOM) 3-4
Siebel Web Template (SWT) Files 3-5
Decoupled Layout 3-6
SWT Folder Structure 3-7
Cascading Style Sheet (CSS) files 3-8
CSS Folder Structure 3-9
JavaScript (JS) files 3-10
JS Folder Structure 3-11
Browser Scripts 3-12
Open UI Client 3-13
Proxy 3-14
Presentation Model (PM) 3-16
Physical Renderer (PR) 3-17
Plug-In Wrappers (PWs) 3-18
Manifests 3-19
Manifest Administration 3-20
Example: Navigating to the My Contacts View 3-21
1. The Physical Renderer or Presentation Model Passes the Request to
the Proxy 3-22
2. The Proxy Sends a Request to the Siebel Server 3-23
3. The Siebel Server Returns the Data 3-24
4. The Presentation Model Applies Business Logic 3-26
5. The Physical Renderer Generates HTML 3-27
6. The Result is Presented to the User 3-28
Siebel Open UI Architecture Summary 3-29
Summary of Differences (In Yellow) 3-30
Recommended Practices 3-31
Practice 3-33
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Administering the Manifest

Objectives 4-2
The Siebel Open UI Manifest 4-3
The Manifest Files View 4-5
The Manifest Expressions View 4-6
The Manifest Administration View 4-7
iv
Use the Manifest Administration View to Specify What Files Should be

Downloaded When 4-8
1. The UI Objects Applet: Object Type 4-9
1. The UI Objects Applet: Usage Type 4-10
1. The UI Objects Applet: Name 4-11
2. The Object Expression Applet: Groups 4-12
2. The Object Expression Applet: Expressions 4-13
3. The Files Applet 4-14
Caveat: Presentation Model and Physical Renderer Files 4-15
Example: Customize Siebel Open UI 4-16
1. Create or Customize JavaScript Files 4-17
Example: A Section of a Custom JavaScript File 4-18
2. Add Custom File(s) to the Manifest Files View 4-19
3. If Necessary, Add Expressions to the Manifest Expressions View 4-20
4. Administer the Manifest to Include the Custom File(s) 4-21
5. Test your Customizations 4-22
Practice 4-24
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
n
hi
t
a
p
e
5 Presentation Model
c o us
k
n
Objectives 5-2
a se t
y
a
Review: Proxy Framework
(m li5-3
en
c
y
e
Review: ThedPresentation
e Model 5-4
l
n
b
A Presentation
ra Object 5-5
Pa sfeModel
k
n an the Presentation Model Examples 5-6
yaCustomizing
r
a
tot Customize a Presentation Model 5-7
n
M nHow
o
Example 5-8
Terminology 5-9
Implement a Presentation Model Customization 5-10
1. Verify the Object Class does not yet Exist 5-11
2. Add the Class to the Namespace 5-12
3. Define the File and Parent File(s) for the Class 5-13
4. Implement a Constructor Function for the Class 5-14
4.1 Declare the Class as a Function 5-15
4.2 Create the class Constructor 5-16
4.3 Specify the Class as an Extension of its Parent Class 5-17
4.4 Add Implementation Code to the Class 5-18
4.4 Add an Init Function 5-20
4.5 Add the Custom Methods for the Class 5-21
Complete Example Page 1 of 3 5-22
Complete Example Page 2 of 3 5-23
Complete Example: Page 3 of 3 5-24

Review: Presentation Model Structure 5-25
Practice 5-27
6
Physical Renderer
Objectives 6-2
The Physical Renderer 6-3
A Physical Renderer Object 6-4
Customizing the Physical Renderer Examples 6-5
How to Customize a Physical Renderer 6-6
Example 6-7
Implement a Physical Renderer Customization 6-8
1. Verify the Object Class Does Not Yet Exist 6-9
2. Add the Class to the Namespace 6-10
3. Define the File and Parent File(s) for the Class 6-11
4. Implement a Function for the Class 6-12
4.1 Declare the Class as a Function 6-13
4.2 Create the Class Constructor 6-14
4.3 Specify the Class as an Extension of its Parent Class 6-15
4.4 Add Implementation Code to the Class 6-16
4.5 Add the Custom Methods for the Class 6-17
Review: Physical Renderer Structure 6-19
Practice 6-21
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
7 Debugging
Objectives 7-2
Suggestions for Debugging a Script 7-3
Browser Developer Tools 7-4
Invoke Developer Tools 7-5
Verify the Script was Downloaded 7-6
Reasons for Failure to Download 7-7
Use SiebelJS.Log() 7-8
Output of SiebelJS.Log() 7-9
The debugger Statement 7-10
Debugging Using Browser Developer Tools 7-11
Recommendations 7-12
Practice 7-14
vi
Cascading Style Sheets and Open UI Themes

Objectives 8-2
Review: Cascading Style Sheets (CSS) 8-3
CSS Rules 8-4
More Advanced CSS Rules 8-5
Conflicting CSS Styles 8-8
Location of CSS Files 8-9
Examining CSS Rules 8-10
Theme 8-11
Themes for Siebel Open UI 8-12
Selecting a Different Theme 8-13
Defining a Theme 8-14
Modify an Existing Theme 8-15
1. Locate the Styling Rules 8-16
2. Edit the Rules 8-17
3. Create the CSS File: Copy the Modified Rules to a New File
3. Create the CSS File: Save the File 8-19
4. Administer the Manifest 8-20
5. Test the Modified Theme 8-21
5. Test the Modified Theme: Verify the Rules 8-22
Create a Custom Theme 8-23
1. Create the Style Sheets 8-24
2. Add the Theme to the List of Values 8-26
3. Administer the Manifest 8-27
4. Test the Custom Theme 8-29
Practice 8-31
s
a
h
)
m
o
c de
e
r
u Gui
t
n
nt
cce d8-18
e
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
9
Siebel Mobile Applications

Objectives 9-2
Siebel Mobile Applications 9-3
Mobile Application Modes 9-4
As-Delivered Siebel Mobile Applications 9-5
User Experience 9-6
Features 9-7
JavaScript Files for Siebel Mobile Applications 9-8
CSS Files for Siebel Mobile Applications 9-9
Enabling an Application Object Manager for Siebel Mobile Applications 9-10
Architecture of Siebel Mobile Applications 9-11
Mobile Applets 9-12
vii
Mobile Applet Web Templates 9-13

Mobile Views 9-14
Mobile View Web Templates 9-15
Mobile Screens 9-16
Customizing the User Interface for Siebel Mobile Applications 9-17
Siebel Disconnected Mobile Applications 9-18
Siebel Disconnected Architecture 9-19
Practice 9-23
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
viii
1
Course Introduction
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Lesson Agenda
This lesson provides an introduction to the:

Instructor and class participants
Training site information
Course:
Audience
A
di
Prerequisites
Goal
Objectives
Methodology
Materials
Agenda
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Siebel Open UI - Foundations 1 - 2
Instructor and Class Participants
Who are you?

Name
Company
Role
What is your prior experience?

Siebel applications
JavaScript
Cascading Style Sheets
s
a
h
)
How do y
you expect
p
to benefit from this course? com
e
e
r
d
i
tu Gu
n
e
cc dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Training Site Information
Rest rooms
Class duration and breaks
Telephones
Meals and refreshments
s
a
h
)
m
o
c de
e
r
Fire Exits
Questions?
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Course Audience
This course is designed for members of the Siebel application
team responsible for customizing Siebel CRM applications
using the Siebel Open UI framework or team members
responsible for planning or administering these customizations
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Course Prerequisites
Recommended:
Familiarity with navigating Siebel CRM applications

Siebel Tools 8.1.x or equivalent
Familiarity with JavaScript
Familiarity with Cascading
C
S
Style S
Sheets
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Course Goal
To familiarize participants with the Siebel Open UI framework
and how to customize it using JavaScript and Cascading Style
Sheets
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Course Objectives
Describe the Siebel Open UI architecture
Identify the key file types involved in customizing the Siebel
Open UI client
Administer Siebel Open UI customizations
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Course Methodology
Subject matter is delivered through:
Lecture and slide presentations

Software demonstrations
Class discussions
Hands-on practices
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Course Materials
Course content is delivered over two days
Student Guide
All slides presented during lecture
Student notes with additional information
Activity Guide
Hands-on practices
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Information Sources
Siebel CRM documentation is available on Oracle Technology
Network (OTN)
http://www.oracle.com/technetwork/documentation/siebel087898.html
Specific guides for this course:
Fundamentals for Siebel Open UI

Configuring Siebel Open UI
Deploying Siebel Open UI
Mobile Guide: Connected
Mobile Guide: Disconnected
s
a
h
)
m
o
c de
e
r
u Gui
t
n
Additional content on My Oracle Support:
cce dent
a
Information Center: Siebel Open y
UI@
(DocSID
tu1511846.2)
e
d
an e this
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Other Sources
Oracle Learning Library

http://www.oracle.com/oll/siebel
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The Siebel
Open
n development team periodically posts transfers of information (TOIs) to
a traUI
y
a
Oracle
Library at http://www.oracle.com/oll. Navigate to Products > Siebel CRM to
M nLearning
on- learning
see available
resources.
Siebel Open UI - Foundations 1 - <#>
Course Agenda
Introducing Siebel Open UI:
Lesson 1: Course Introduction (this lesson)
Lesson 2: Introducing Siebel Open UI
Lesson 3: Siebel Open UI Architecture
Customizing Siebel Open UI:
Lesson 4: Administering the Manifest
Lesson 5: Presentation Model
s
a
h
Lesson 6: Physical Renderer
)
m
o
c de
Lesson
L
7
7: D
Debugging
b
i
e
r
u Gui
t
n
Lesson 8: Cascading Style Sheets and Open
t
cce UInThemes
a ude
@
t
y
S
e
d
an e this
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Course Agenda
Additional Topics:
Lesson 9: Siebel Mobile Applications
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
2
Introducing Siebel Open UI
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Objectives
After completing this lesson, you should be able to:
Describe Siebel Open UI
Identify advantages of Siebel Open UI over the Siebel High
Interactivity (HI) user interface
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Siebel Open UI
Is Oracle's next-generation browser client for Siebel desktop
and mobile applications
Uses the same back-end architecture, but changes the way
the user interface (UI) is rendered
Can
C co-exist
i t with
ith fformer, ttraditional
diti
l Si
Siebel
b l clients
li t
Siebel Enterprise
a
s
a
)h
Web Server
m
co de
Database
e
r
u Gui
t
n
Open UI
cce dent
a
Client
tu
Siebel Server y@
S
e
d
Continued
an e this
p
c
s
k to u
n
a
ay ense
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
The former
employee-facing
client is the high-interactivity (HI) client and can be replaced with
a tran
y
a
the
UI -client. Open UI is not available for the customer-facing standard-interactivity (SI)
M Open
non are special Open UI versions of some former customer-facing clients; for
client. There
Traditional
Client
example, Siebel Self Service Portal.

All clients can run against the same Siebel Repository File (SRF). The SRF is a compiled
version of metadata that represents the Siebel application.
A single application object manager (AOM) is configured to either have Siebel Open UI
enabled or to use the "traditional" interface; a single AOM cannot support both Siebel Open UI
and the HI or SI client.
The architecture will be discussed in detail in subsequent lessons.
Siebel Open UI
Uses open standards to render the application

Uses HTML, Cascading Style Sheets (CSS), and JavaScript
Downloaded to the client as needed to render the page/view
Does not use ActiveX

Does
D
nott require
i IInternet
t
t Explorer
E l
(IE)
Runs on any standards-compliant platform
a
s
a
)h
m
Traditional
co de
HI Client
e
Web Server
r
i
u GDatabase
t
u
n
Any standardscce dent
a
compliant platform
Open UI
y@ s Stu
e
Client
d
thiServer
an Siebel
p
e
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Browser
Compatibility:
a tran To improve performance, as of IP 2014 Siebel Open UI is no longer
y
a
"infinitely"
browsers must be modern enough to use JavaScript
nM nobackwards-compatible;
ECMA-262
and later. For a complete list of supported browsers, review the Certifications tab
Requires IE
and ActiveX
Siebel Enterprise
on My Oracle Support.
As of this writing, CSS 2.1 is the minimum requirement for Cascading Style Sheets, and
HTML5 is recommended but not required.
HyperText Markup Language (HTML) is the primary markup language for displaying web
pages and other information that can be displayed in a web browser.
Cascading Style Sheets (CSS) is a style sheet language used to style web pages written
in HTML. It is designed primarily to enable the separation of document content from document
presentation such as the layout, colors, and fonts.
JavaScript (JS) is an open source client-side scripting language commonly implemented as
part of a web browser in order to create enhanced user interfaces and dynamic websites.
ActiveX is a software framework created by Microsoft that adapts its earlier Component
Object Model (COM) and Object Linking and Embedding (OLE) technologies for content
do nloaded from a net
downloaded
network,
ork partic
particularly
larl in the conte
contextt of the World Wide Web.
Web
Siebel Open UI Benefits
Native browser support

Mobile device support
Updated look
Enhanced user experience
Client-side customizations
Large community of developer resources
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Native Browser Support
The Siebel page renders in any standards-compliant browser

Is rendered like other web pages in that browser
Takes advantage of browser functions

History, print, zoom, find, tabs, bookmarking, and so on
a
s
a
)h
m
Open
p UI in
p UI in
oOpen
cMozilla
e
Google Chrome
Firefox
e
r
d
i
tu Gu
n
e
cc dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The CSS
files
n with the Siebel application contain some rules that use browser
a tshipped
a
y
r
a
extensions
nto- invoke browser functionality that has yet to be made an industry standard. For
M nobrowser
example,
extensions are used to create shaded buttons on browsers that support
linear gradient color display. More details on CSS are in a subsequent lesson.
Mobile Device Support

Siebel mobile applications are built using the Siebel Open UI
framework
Applications run on any standards-compliant browsers
Applications look like other native applications
Integrates
I t
t with
ith mobile
bil ffunctions
ti
Gestures, calls, email, location, and so on
A Siebel mobile application
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Each Siebel
mobile
ya -tran application requires a separate license.
a
M non
Updated Look
Open UI-specific CSS files provide a cleaner, more modern
look and enhanced functions
New overall look
Simple querying
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Enhanced User Experience
Controls within an applet automatically resize

Textboxes are resize-able and include spell check
Keyboard tabbing has been enhanced
The calendar has been improved
And more
Drag a textbox corner to
expand the textbox
s
a
h
)
m
o
c de
and the other controls automatically
e
r
u Gui
resize (they are narrower here)
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The calendar
an a user to specify start of week and workdays.
ya -tallows
r
a
M non
There are some limitations in the releases.

releases Not all HI features are implemented in Open UI
UI.
See "Best Practices: Deployment Guide for Siebel Open UI: Document 1499842.1" on My
Oracle Support.
Responsive Web Design

As of IP2014 the layout of the page depends on the size of the
browser window
Frequently referred to as an aspect of "Responsive Web
Design"
Example: The full-sized

full sized window is full-featured:
full featured:
"Full-size" window
Application-level menus
s
a
h
)
m
Tabs and view bar
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
Continued
c o us
k
n
t
ya nse
a
(m lice
y
e
nd rable
a
P sfe
kconfiguring
n
Detailsa
on
n responsive web design are in the Siebel Open UI - Advanced
a
y
r
t
a
- course.
JavaScript
M nonAPI
Small global icons

As the user shrinks the window (or on a device with less
resolution), features are moved, resized, or removed
automatically
Application-level menus are still
visible
"Mid-size"
Mid size window
Larger global icons
s
a
h
View bar has been removed)to
omwhich
provide room for the c
tabs,
are now in
ide
ure2 levels
t
u
n
e nt G
c
c
a ude
@
t
y
S
e
d
an e this
p
Continued
c o us
k
n
t
ya nse
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non

At the smallest resolutions, almost all "non-vital" features have
been removed
No application-level menu
"Small" window
No global icons
A vastly-reduced
number of tabs
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Client-Side Customizations
The framework provides a full continuum of customization
possibilities using the public JavaScript API
The as-delivered Siebel Open UI client behaves very similarly
to the high-interactivity client
You can use the JavaScript API to get as sophisticated as you
want with your customizations
You can extend so that the application looks nothing like a

standard Siebel application
You can extend small bits and pieces
a
s
a
)h
m
co e
e
r
AsFully
id
ucustomized
In between
t
u
n
delivered
G
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Open UI
provides
a trana fully published JavaScript API to build powerful CRM solutions. That API
y
a
allows
n- to easily extend the capabilities of Oracle provided features. The new API
M ncustomers
oanything
supports
from simple validations to replacement of whole UI components that require
rendering in special ways.

Customers can continue to use tools they are accustomed to or use the new web
development extensibility to build features previously unachievable using traditional means.
Server-side
Server
side customizations still require Siebel Tools.
Large Community of Developer Resources

Using standards (HTML, CSS, and JavaScript) provides a
large pool of available developers and tools
Siebel applications can be extended using the same tools that
developers are familiar with
Developers can work with the Siebel interface similarly to other
web applications
Developers use their preferred tools to edit JavaScript
and CSS files to customize the application
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Customizing Siebel Open UI
You can use the framework to extend the client application

Change the overall look and feel
Change the way data is presented
Add client-side business logic
s
a
h
)
m
o
c de
e
r
u Gui
Note: Siebel Tools is still required for server-side customizations
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Change the Overall Look and Feel

Client-side layout is managed by cascading style sheets
(CSS) and updated Siebel Web Template (SWT) files
A theme is a collection of CSS files that implement the look
and feel for the application
Users
U
can choose
h
which
hi h th
theme tto use iin th
their
i user preferences
f
Custom CSS files can be added to override the defaults

As-delivered
Aurora tab theme
As-delivered
Aurora tree theme
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Three types
of
n are available: Tab (tabs across the top of the screen), Tree (navigation
a trthemes
a
y
a
- side of the page), and Side Menu (a hidden menu that is displayed when the
links
the
M along
nona menu icon). The as-delivered application provides the Aurora theme in all three
user clicks
formats.
Siebel Web Template files provide placeholders for Siebel view and applet layouts on top of
which the HTML is constructed.
Change the Way Data is Presented

JavaScript controls are used to present the data onto the
application page
A specific piece of JavaScript code is used to render a specific
type of Siebel control
Long text box

Calendar
List
And so forth
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Using JavaScript Controls
Use the JavaScript controls Oracle provides

Many are sourced from public jQuery libraries
Substitute in JavaScript controls from open source libraries

Use JavaScript controls from private libraries
Write your own custom JavaScript controls
Standard list applet
control to show contacts
Tiled applet control

to show contacts
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
k P nsfe JavaScript library designed to simplify the client-side scripting of
jQuery a
isna multi-browser
y jQuery
tra library is public.
HTML.
n
Ma nThe
o
Add Client-Side Logic

The JavaScript API has access to Siebel data and metadata
You can use the JavaScript API to manipulate Siebel data and
add client-side logic
If Job Title does not have a value,

do not display work and main phone
s
a
h
)
m
o
c de
e
r
u Gui
t
n
If Job Title has a value, display
cce dent
work and main phone
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Siebel Tools
Use Siebel Tools to:

Modify business layer objects
Add fields to business components

Add server-side logic
Enable UI objects for display
Add controls to applets

Add applets to views
Generate a Siebel Repository file (SRF)
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
JavaScript
Use JavaScript to:

Provide interactivity with the user
Customize how controls appear

Partially refresh the view
React to user clicks
Implement client-side logic
Show or hide fields inside the applet

Manipulate some Siebel data
s
a
And so forth
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Considerations
Developers modify CSS and JavaScript files outside of the
Siebel framework using their own tools and editors
Standard web development practices should be followed
Siebel Tools is not used to track, check in, or manage these
fil customizations
file
t i ti
The framework does provide separate Siebel directories for
custom files
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
Continued
an e thi
p
c
s
k to u
n
a
ay ense
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
So they are isolated from upgrades
You must manage your own custom file versions
Considerations
You can completely tailor the user interface using the
JavaScript API
Redesign the way the Siebel application is rendered
Add Open UI portlets to other applications
And
A d so fforth
th
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
Continued
an e thi
p
c
s
k to u
n
a
ay ense
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
Considerations
Applets that are classified as standard interactivity applets are
not usually supported in Open UI
A warning icon is displayed in the view
You can:
Remove th
R
the applets
l t ffrom the
th view
i
Rework the applets to conform to high-interactivity
Wait until Oracle migrates these applets
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Reference:
See
Tasks for Siebel Open UI" in Deploying Siebel Open UI for more
n
a tra"Migration
y
a
information
M nonon- making standard interactivity applets and views work in Open UI.
Exceptions: Standard Interactivity applets without business components or applets outside of
views may be converted to RIA (rich internet application) applets and displayed in Open UI
A view becomes standard activity if any of the below criteria are met:
Contains one or more applets which are not bound to a business component
Contains one or more applets whose "Class" properties points to a class which derives
from classes that implement the base functionality of standard interactivity
High Interactivity"
Interactivity set to 1
Contains one or more applets whose associated Class have "High
Contains one or more applets with User property: High Interactivity Enabled = N
Contains one or more applets outside of a View (not associated to a view web template
other than standard pop ups (MVG/Pick/Assoc)). For example "About Record"
The server side renderer implements standard interactivity
Contains one or more applets with a portlet in it
Product Catalog style layouts.
layouts
Lesson Highlights
Siebel Open UI is the new user interface for Siebel
applications
Built using standard HTML, CSS, and JavaScript

Will run in any standards-compliant browser
P id similar
Provides
i il ffunctionality
ti
lit tto th
the Si
Siebel
b l HI client
li t
Implements responsive web design (RWD)
Provides the ability extend Siebel customizations using web
development practices
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Practice
Explore the Siebel Open UI client as an end user
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
3
Siebel Open UI Architecture
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Objectives
Describe the components of the Siebel Open UI architecture
and how they interact
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Siebel Open UI Key Components
Application Object Manager (AOM)

Siebel Web Template (SWT) files
Cascading Style Sheet (CSS) files
JavaScript (JS) files
Open UI Client
Manifests
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
More
p
c
s
k to u
n
a
ay ense
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
Application Object Manager (AOM)

Runs on the Siebel Server and processes client requests
To work with Open UI Clients, set the parameters for the
AOM:
EnableOpenUI = TRUE
HighInteractivity = TRUE
a
s
a
)h
m
Select the desired AOM o
c de
e
r
u Gui
t
n
cce dent
a
tu and
y@
S
e
Set iEnableOpenUI
d
th s
an e HighInteractivity
to True
p
c
s
k to u
n
a
ay ense
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
For existing
deployments
it is best to create a new object manager so that you can continue to
a tran
y
a
run
n- object manager for high interactivity clients as necessary. The URL for Open
M thenformer
odifferent
UI will be
from the standard URL and available in parallel to the existing HI client.
You must generate the new virtual directories on the Siebel Web Server to support the new
object manager.
If you are prototyping using the Siebel Developer Web Client, you can set these parameters in
the [InfraUIFramework] section of the client configuration (.cfg) file.
Siebel Web Template (SWT) Files
Provide placeholders for Siebel view and applet layouts

Allow Siebel data to be mapped to logical placeholders within
the layout
Provide the framework on which the HTML is constructed

Are
A processed
db
by th
the Si
Siebel
b lS
Server
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Siebel Web Template files
have a .swt extension
Decoupled Layout
Open UI uses new versions of the SWT files which no longer
contain explicit layout
They use <div> tags instead of explicit alignments or frames to
support CSS styling
The 'original' SWT files include explicit
tables, locations, boundaries, and so forth
a
s
a
)h
m
co e
e
r
The updated SWT files use <div> tags, allowing
the
id
uthe page
t
u
n
G
CSS stylesheets to determine how to lay
out
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The original
SWT
a tranfiles contain layout information. The new files do not. In short, the SWT files
y
a
have
so that instead of saying, "Put this in as a table that's this big at this
M beenonchanged
locationnon
the screen," they say, "The first element in your list goes here. Let the CSS file
decide on the size and layout of it."

For more information on <div> tags in HTML, consult an HTML reference guide; for example,
Wikipedia at http://en.wikipedia.org/wiki/Span_and_div.
SWT Folder Structure
SWT files are on the Siebel Server in \siebsrvr\WEBTEMPL

The WEBTEMPL directory contains the original SWT files
The OUIWEBTEMPL subdirectory contains the new Open UI
SWT files
a
s
a
)h
m
co de
e
r
u Gui
t
Siebel Open UI SWT files
n
are in OUIWEBTEMPL
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
If you are
prototyping
ya -tran using the Siebel Developer Web Client, the path is client\WEBTEMPL.
a
M non

Consist of a set of styling rules that specify how content in an
HTML document is to be displayed
Separates the document presentation from the document
content
Are written in a markup language that uses tags
Allow a set of styling rules to apply to multiple web pages

Modifying the presentation of a large website can be performed
by editing a single set of files
a
s
a
h
Include rules that specify how to lay out block-level elements
)
m
o
c de
defined in the HTML source
e
r
u Gui
t
n
Are referenced to present the final UI to the
user
cce dent
a
HTML elements include style information
tu references styles
y@ s Sthat
e
d
stored in CSS files
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The original
CSS
ya -tranfiles did not contain layout information. The new CSS files do.
a
M non
CSS Folder Structure

CSS files are on the Web Server in
\eappweb\PUBLIC\<lang>\files
Siebel Open UI CSS files

are in PUBLIC\<lang>\files
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The directories
an the files for HI and Open UI.
ya -trcontain
a
M non
If you are prototyping using the Siebel Developer Web Client

Client, the path is
client\PUBLIC\enu\files.
JavaScript (JS) files

Contain client-side business and presentation logic
Are used by the Open UI client to help render the application
in a browser
For example, populate controls with data from business
component fields
Are provided by Oracle for as-delivered functionality

Customers can add other files to change application behavior
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Modifying
existing
a tran files: Rather than modifying existing files, Siebel Open UI allows you to
y
a
reference
modified
version of the file in a separate custom directory. This protects the
M oanfrom
originalnfile
corruption, and protects the modified file from being overwritten by upgrades.
Details are in a subsequent lesson.
JS Folder Structure
JS files are on the Siebel Web Server in
\eappweb\public\<lang>\<build>\SCRIPTS
The top directory contains all JavaScript for high interactivity
The siebel subdirectory contains all JavaScript for the Open UI
framework
The 3rdParty subdirectory contains all 3rd party controls
s
a
h
)
m
o
Siebel Open UI JavaScript files are inc
e
e
PUBLIC\<lang>\<build>\scripts\siebelu
orr3rdParty
d
i
t
u
n
G
e
t
cc den
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Store your
custom
ya -tranJavaScript files in the custom subdirectory of the siebel directory.
a
M non
Because the framework is using JavaScript,

JavaScript you can use open
open-source,
source 3rd
3rd-party
party libraries
such as JQuery. In fact, many of the controls are implemented by Oracle engineering using
JQuery.
If you are prototyping using the Siebel Developer Web Client, the path is
client\public\<lang>\<build>\SCRIPTS.
Browser Scripts
JavaScript files that are used with HI clients are separate from
the JavaScript files that are part of the Open UI framework
Historical JavaScript files (if any) are on the Web Server in
\eappweb\PUBLIC\<lang>\<srf>\bscripts\all
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Traditional
browser
ya -tran scripts can run side by side with Open UI, but it is not recommended.
a
M non
eappweb
If you are prototyping using the Siebel Developer Web Client

Client, the path is
client\public\<lang>\<srf>\bscripts\all.
Open UI Client
Is a framework that runs within the browser on the client to
present the interface to the user
Only talks to the back-end server components when needed

Caches data locally
A li client-side
Applies
li t id llogic
i
Binds the data to the presentation layout
Utilizes:
Proxies
s
a
h
)
Presentation Models (PM)
m
o
c (PWs)
e
e
Physical Renderers (PR), including Plug-in Wrappers
r
d
i
u
t
u
n
G
e
t
cc den
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Proxy
Provides the interface to the back-end Siebel data

Gets runtime data and metadata as needed
Provides data back to the server
Is provided by Oracle
Must not be modified by customers
Browser
Open UI Client
s
a
h
)
Runtime
m
o
PM
c de
data
e
r
u Gui
t
n
Proxy
Proxy interfaces with
cce dent
the servers
a
y@ s Stu
e
d
Siebel Server
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Runtime
data
ya -tisrathen records from the Siebel database that the user will see in the view.
a
Metadata
M noisnother data such as repository objects that are needed to construct the view.
PW
PR
Metadata
Proxy
Creates local representations of metadata objects

Creates a "shadow" copy of the business object associated
with the view
Creates a "shadow" copy of the business components
associated with the applets in the view
Creates a "shadow" copy of the applets
Creates a "shadow" copy of the controls in the applet
And so forth
s
a
h
)
Browser
Local representations
m
o
c de
Open UI Client
e
r
u Gui
Metadata
t
n
PW PR
cce dent
Runtime
a
PM
y@ s Stu
data
e
d
Proxy pan
thi
e
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Presentation Model (PM)
Works with the proxy data

Collects field values
Sets properties
Determines what logic should be applied

Allows for client-side scripting without the need to engage the
Siebel Server
May capture behaviors
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
kcovered
n
Detailsa
are
n in a subsequent lesson.
a
y
r
t
a
M non Did the user leave a control?
Did the user click a link?
Physical Renderer (PR)

Builds or renders the user interface
Uses different controls to display different types of data
Datetime versus currency versus text
Uses different controls to display records in different ways

The same records (same presentation model) can be shown as
a:
List applet
Carousel
Timeline
A d so fforth
And
th
s
a
h
)
m
o
c de
e
r
i
u Gmobile
t
u
n
Supports different presentations for desktop
versus
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
kcovered
n
Detailsa
are
n in a subsequent lesson.
a
y
r
t
a
M non
Plug-In Wrappers (PWs)
Are physical renderers for controls

For example, a physical renderer for a button
Are attached to control types

For example, attach a physical renderer for all text field controls
Separate overall rendering of an object (for example, an

applet) from rendering controls for the applet
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
faenew feature in IP2014.
k P are
s
n
Plug-inawrappers
n
y
ra
Ma non-t
Manifests
Identify which files are associated with a given user interface
element
If an element is not listed, a default set of files is used
Control which files get downloaded to the client

Browser
Open UI Client
PW
PR
a
s
a
)h
m
co e
Proxy
e
r
Specify which files to download
id
u to theGclient
t
u
n
cce dent
Web Server /
a
Siebel Server
y@ sJSStu CSS
e
d
Manifests
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Only the
files
nare required for a particular element are downloaded to the browser. The
a that
a
y
r
t
a
- manager is responsible for reading the manifest and determining which files
application
object
M ondownloaded.
need tonbe
It provides this list of files in the HTML header sent to the client
PM
JS
CSS
browser.
The manifest is stored within the Siebel database just like other administrative data.
Manifest Administration
Manifests are managed in the Application - Administration
screen within the Siebel application
The Administration - Application > Manifest

Administration view
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
kmanifest
n
Detailsa
on
n administration are covered in a subsequent lesson.
a
y
r
t
a
M nonCopyright 2015, Oracle and/or its affiliates. All rights reserved.
Example: Navigating to the My Contacts View

In this example, a user clicks My Contacts to navigate to the My
Contacts view:
1. The physical renderer or presentation model passes the
request to the proxy
2 The
2.
Th proxy sends
d a requestt tto the
th Siebel
Si b l server
3. The Siebel server returns the results
4. The presentation model applies business logic
s
a
5. The physical renderer generates the final HTML
h
)
m
o
6 The result is presented to the user
6.
ure Guide
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
1. The Physical Renderer or Presentation Model

q
to the Proxy
y
Passes the Request
The physical renderer or presentation model recognizes an
event (a mouse click), prepares a request, and sends it to the
client proxy
Browser
Open UI Client
PW
PR
a
s
a
)h
m
Proxy
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Handling
Events:
a tranAs of IP2014, event handling is managed using an "Event Helper" object.
y
a
- of this object are described later in this course, for a more detailed
While
basics
M the
nonof the event helper consider taking Oracle University's Siebel Open UI - Advanced
description
User click
PM
JavaScript API course.
2. The Proxy Sends a Request to the Siebel Server

The proxy 'recognizes' that it does not have the necessary
data to fulfill the request
The client cache doesn't have the required data locally
The proxy sends a request for the information to the

application
li ti object
bj t manager (AOM) on the
th Siebel
Si b l server
Browser
Open UI Client
s
a
PW PR
h
)
m
o
PM
c de
e
r
u Gui
t
n
Proxy
t
Proxy sends
n
ccerequest
e
a
@ Stud
y
e
Siebel Server
d this
n
a
AOM
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
No
contact
data
3. The Siebel Server Returns the Data

The application object manager passes the required data to
the proxy
Metadata: the object definitions for the view, applet, business
component, and so forth
Runtime data: the contact records available to the user
Browser
Open UI Client
Metadata
s
a
h
)
PM
m
o
R cti
Runtime
d
data
t
e
r
d
i
Proxy
u Gu e
Passed to Proxy
t
n
t
cce denDatabase
a
Web Server /
y@ s Stu
e
SRF
d
i
Siebel Server
SWT
an e thAOM
p
Metadata
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
PW
PR
Runtime
data
3. The Siebel Server Returns the Data

The AOM checks the manifest and provides the list of
JavaScript and CSS files needed for the applet/view
The browser downloads and caches these files
Browser
Open UI Client
PW
PR
Metadata
JS
CSS
a
s
a
)h
Proxy
m
o
Fil d
Files
downloaded
l dcd
e
e
r
d
i
tu Gu
n
e
Web Server /
c ent
c
a
Siebel Server
@ JSStud CSS
y
SWE
Manifest
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
The appropriate
n files associated with the theme and view/applet are also downloaded
a traCSS
y
a
and
M cached.
non
PM
Runtime
data
4. The Presentation Model Applies Business Logic

The proxy notifies the presentation model that all data has
been received and files downloaded
The presentation model applies any required business logic
using the downloaded JavaScript files
Browser
Open UI Client
s
a
PW PR
h
)
Metadata
CSSom
JS
PM
c de
e
r
Runtime
u Gui
t
n
Proxy
data
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
5. The Physical Renderer Generates HTML

The presentation model notifies the physical renderer that the
metadata and data are ready to be rendered
The physical renderer:
Renders the applet (or other object)
If necessary, uses the plug-in wrappers to render the controls
Browser
Open UI Client
s
a
h
HTML
)
Metadata
CSS
m
JS
o
PM
c de
e
Runtime
r
u Gui
t
n
Proxy
data
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
PW
PR
6. The Result is Presented to the User

The final HTML with embedded JavaScript and CSS styling
and data is presented to the user in the browser
Browser
Open UI Client
PW
PR
PM
Metadata
Runtime
data
JS
CSS
HTML
s
a
h
)
m
o
c de
e
r
u Gui
t
n
Record data
cce dent
to display
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Proxy
HTML to
display
Siebel Open UI Architecture Summary
Browser
Open UI Client
PW
PR
Metadata
PM
Runtime
d t
data
JS
Proxy
CSS
Downloaded
Interactions
s
a
h
)
Manifest
m
o
c de
e
r
i
u GCSS
t
SRF
u
JS
n
SWT
cce dent
a
Metadata
y@ s Stu
e
d
i
n
h
t
a
p
e
Runtime datac
oDatabase
us
k
n
t
ya nse
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Web Server /
Siebel Server
AOM
Specifies which files to download
Siebel Open UI Client
ActiveX UI
Controls
Data and control

g decoupled
p
bindings
Siebel HI Client
JavaScript UI
Controls
JavaScript
Library
JQuery Library
Layout Data &

Data bindings
Client
C
Browser
Siebel HI Client
JavaScript
Extension API
ActiveX Proxy
JavaScript
Proxy
Client
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
In the diagram
nSiebel Server and Siebel Web Server are represented together as
a trthe
a
y
a
"Server".
M nonSiebel Web Templates
Style Sheets
Conditional
Rendering
Siebel Object
Manager
Siebel Tools
Configuration
HTML
Composition
Conditional
Rendering
Siebel Web Templates
a
Server
Style Sheets
HTML
Composition
Layout
y
Styling
Styling
Layout
Siebel Open UI
Static:
Layouts moved to
CSS from SWT
Server
Siebel HI Client
Dynamic:
Summary of Differences
((In Yellow))
Recommended Practices
Never edit as-delivered JavaScript files

Create and reference custom files instead
Isolate customizations in "custom" subdirectories

Create a new object manager for Open UI and test out their
deployment in parallel with the HI client
Develop a plan to migrate any browser scripts to the Open UI
framework
a
s
Be aware of standard interactivity applet use and implications
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Reference:
For
n information, see Deploying Siebel Open UI on Oracle Technology
a tramore
y
a
- Siebel Open UI Deployment Guide (Doc ID 1499842.1) on MyOracle Support.
Network,
M noornthe
Lesson Highlights
The architecture for Siebel Open UI is similar to the
architecture for the high interactivity with some differences
A separate application object manager is used which is enabled
for Open UI
Layout information is moved from the SWT to the CSS files
Data binding and layout is decoupled in the client by using
proxy, presentation model, physical renderer, and CSS layers
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Practice
Enable Siebel Open UI for an application object manager
Use the browser to see which files are downloaded
Inspect some of the directories
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
4
Administering the Manifest
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Objectives
Describe the purpose of each of the Siebel Open UI manifest
administration views
Add custom files to the manifest
Administer the manifest
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
The Siebel Open UI Manifest

Is a set of metadata records in the Siebel database that
determine:
What files should be downloaded to the client
JavaScript files
When those files should be applied
Optionally, create conditional rules for when a file should be

applied
s
a
h
)
m
Associate files to objects
j
in the Siebel application
pp
o
c de
e
r
i
For example, specify which JavaScript files should
be
u Gassociated
t
u
n
with which applet, navigation item, or other
t
n
cceobject
e
a
@ Stud
y
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
Where those files should be applied
The Siebel Open UI Manifest

Is administered using the manifest administration views under
Administration - Application
Manifest Files
Manifest Expressions
Manifest
M if t Administration
Ad i i t ti
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
The Manifest Files View
Determines what files are available to be downloaded

Files include relative paths
.js files: <eappweb>\PUBLIC\<lang>\<build>\scripts

.css files: <eappweb>\PUBLIC\<lang>
Custom files (including relative paths) must be added to this

view before they can be used in other manifest views
a
s
a
)h
m
co d>e
Administrationr-e
Application
i that
u Gallufiles
t
Manifest Files
includes
n
t to the client
cedownloaded
mightcbe
n
e
a
@ Stud
y
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
File References:
a tranThe manifest contains file references; the files themselves are not uploaded
y
a
to
This allows you to modify the files in the filesystem and the updated
Mthe Siebel
on-Enterprise.
files arenimmediately
available. Do not forget that the browser caches JavaScript files, so you
may need to clear the browser cache to see the updated files.
The Manifest Expressions View

Defines expressions that are used to determine whether or
not to download a file
When should a file be applied?
Expressions typically compare object or profile attributes to

lit l values
literal
l
Evaluate to either TRUE or FALSE
For example, the expression for Base is
GetObjectAttr("OperationalMode") = 'Base'
a
s
a
)h
m
co de
e
r
i
Administration - Application > ManifesttExpressions
u Guincludes
n
name-expression
pairs
cce dent
a
y@ s Stu
e
d
i evaluates to TRUE if the
For example, the expression
named
Base
thattribute
an object
p
OperationalMode
equals 'Base'
e
c
s
u
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
The expressions
n written using Siebel Query Language. The full range of Siebel Query
a traare
y
a
Language
is available.
M nonexpressions
The two most-commonly-used
most commonly used methods are GetObjectAttr() to read an attribute from the
currently-active object (for example, the applet), and GetProfileAttr() to read an attribute from
the currently-active application and session (for example, Siebel Call Center while logged in
as SADMIN).
The Manifest Administration View

Associates files from the Manifest Files view with user
interface (UI) objects such as applets and controls
Uses expressions from the Manifest Expressions view to
determine when to download
Which files to download in which situations
Specifies how the files are to be used

Physical renderer, presentation model, or so forth
The current view shows download rules for
the Contact List Applet
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
tu the Manifest
y@ Files
from
S
e
d
athen e this Files view
Expressions from
p
c oviewus
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Screenshot:
anscreenshot has been modified to fit the page.
ya -tThe
r
a
M non
Screenshot example: In the example in the screenshot,

screenshot the selected record in the top applet
(UI Objects) is of Type = Applet, Usage Type = Physical Renderer, and Name = Contact List
Applet. This record determines what specific files should be downloaded for the Contact List
Applet's physical renderer.
In the Object Expression applet, Group Name = Grid is selected. This corresponds to a simple
table of records. So when a user navigates to the Contact List Applet, and the user
preferences specify that a table of records should be shown (a grid), the file to the right
(siebel/jqgridrenderer) should be used as the physical renderer.
Use the Manifest Administration View to Specify What

Files Should be Downloaded When
1. Specify the object type, usage type, and object name in the
UI Objects applet
2. Specify expression groups and expressions in the Object
Expression
p
applet
pp
3. Specify the files to be downloaded in the Files applet
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
More
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
1. The UI Objects Applet: Object Type
Specify an object type with which to associate the file :

Application: The file is loaded when the application is loaded
View, Applet, Toolbar, Menu, or Control: The file is loaded
when the specified object of this type is loaded
Navigation: The file is loaded when the navigation items are
displayed
s
a
h
)
m
o
c de
e
r
Specify an object type
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
1. The UI Objects Applet: Usage Type
Specify how the file(s) will be used:

Common/Resources: The file is a reference or resource file and
should always be downloaded
Theme: The file supports a theme
Presentation Model/Physical Renderer: The file is the base
Presentation Model or Physical Renderer file for the object
Web Template: This record references a Siebel Web Template
a
s
a
)h
m
co de
e
r
u Gui
t
n
nttype
ccethe dusage
Specify
e
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Resource
Files:
files are files that are not necessarily JavaScript or CSS files, but
n
a traResource
y
a
that
by the JavaScript; for example, HTML files that might be referenced to
M maynobenreferenced
add a standard
footer to a page or so forth.
The files required to support the standard Siebel Open UI interface are already populated in
these views. You only need to add or modify records in this view if you are customizing the
application.
1. The UI Objects Applet: Name
Specify the name of the object as it appears in Siebel Tools

Use Help > About View to get applet or view names
a
s
a
)h
m
co de
e
r
i
uobjectG
t
u
Specifyn
the
name
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Other names:
n are names in ALL CAPS that are used to specify more general
a trThere
a
y
a
configurations;
for example, DEFAULT FORM APPLET applies to all form applets that do not
M non-rules
have specific
set for them.
Duplicate Names: You cannot modify as-delivered records. Instead, you can create ONE
additional record with the same Type, Usage Type, and Name as an as-delivered record. The
files you specify in your record will be downloaded in addition to those specified in the asdelivered record. This is the only exception to the requirement that Type/Usage Type/Name
be unique for each record.
2. The Object Expression Applet: Groups

A group is a set of Boolean expressions that determines
whether or not to download a file or files
When should this file be downloaded?
A single group evaluates to TRUE or FALSE
Each
E h group h
has a llevell
Each group is evaluated in order; evaluation stops when a
group evaluates to TRUE
a
s
a
)h
m
co de
e
r
u Gui
t
n
t is evaluated
ceGridegroup
n
cThe
a
@ Sfirst;
tualld of its expressions
y
e
d this are combined with ANDs
n
The Map group
a
is evaluated lastcp
se
u
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
Web Template
n If Usage Type = Web Template, then you must specify the name of
a traName:
y
a
- Template here, rather than in the Files applet.
the
Web
M Siebel
non
Specify the operator (AND or OR) to use to combine
expressions in the group
Screenshot: The screenshot has been modified to fit the page.

Exception: When Type = Application, all groups that evaluate to TRUE are applied.
2. The Object Expression Applet: Expressions

An expression is a simple Boolean expression that returns
TRUE or FALSE
Add expressions to a group to determine whether to download
the files associated with the group
Th
The L
Levell fifield
ld d
determines
t
i
th
the order
d iin which
hi h th
these
expressions are evaluated
Evaluation stops as soon as the result is known
For example, if expressions are being ANDed and a single

a
s
a
expression returns FALSE, evaluation stops and the group returns
)h
m
FALSE
o
c de
e
r
u Gui
t
n
cce dent
a
The
group
the Desktop,
@Grid and
tuGridevaluates
y
S
e
EditList,
expressions,
in that
d
s
i
n
h
order,
and
ANDs
them
together
pa use t
c
k to
n
a
ay ense
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
Expressions:
nexpressions are those defined in the Administration - Application >
a trThe
a
y
a
Manifest
view.
nM noExpressions
3. The Files Applet

For each expression group, specify a file or files to download
to the client
download jqgridrenderer.js
from the siebel directory
s
a
h
)
m
o
c de
If the Grid expression group
e
r
u Gui
evaluates to TRUE
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
fe
k PThenas-delivered
s
n
Defaultafiles:
application includes a set of JavaScript and CSS files to
a
y
r
t
a
download
M noton-the client. You are specifying custom files to download here.
Caveat: Presentation Model and Physical Renderer

Files
For presentation model and physical renderer files, you must
specify the file within a define statement in the file itself
For example,
define("siebel/jqgridrenderer", [<other files
to include>]
function() {
Details on creating and configuring these files are in
subsequent lessons
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
For Presentation Model and
Physical Renderer files, the file
name mustt b
be added
dd d tto th
the fil
file it
itselflf
Example: Customize Siebel Open UI

1. Create or customize JavaScript files
2. Add the custom file(s) to the Manifest Files view
3. If necessary, add expressions to the Manifest Expressions
view
4. Administer the manifest to include the custom file(s)
5. Test your customizations
s
a
h
Example: Modify the Contact Form Applet so that if the contact's Job
)
m
o
Title is blank (empty)
(empty), the contact
contact's
s work phone number and fax phone
c de
e
r
number are not shown
u Gui
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
1. Create or Customize JavaScript Files

Recommended practice: Place all new or custom JavaScript
files in
../eappweb/PUBLIC/<lang>/<build>/SCRIPTS/siebel/custom
For example,
../eappweb/PUBLIC/enu/23044/SCRIPTS/siebel/custom
/eappweb/PUBLIC/enu/23044/SCRIPTS/siebel/custom
This isolates your modified files from the as-delivered files
You may include a folder structure within this folder
a
s
a
Downloading 3rd-party libraries
)h
m
co de
Copying
C
i and
d modifying
dif i as-delivered
d li
d JJavaScript
S i trfil
files
e
u Gui
t
n
Writing your own
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Customizing
presentation
model and physical renderer JavaScript files will be discussed in
a tran
y
a
subsequent
M nonlessons.
Obtain new files by:
Example: A Section of a Custom JavaScript File

This section of physical renderer code shows or hides the
work phone number and fax number of a contact based on the
value of a Boolean canShow variable:
The canShow variable is set in the presentation model file
...show the work and
If canShow is true...
if( canShow ){
fax numbers
$( "div#WorkPhoneNum_Label" ).parent().show();
$( "[name='" + WorkPhoneNum.GetInputName() + "']" ).show();
$( "div#FaxPhoneNum_Label" ).parent().show();
$( "[name='" + FaxPhoneNum.GetInputName() + "']" ).show();
}
a
s
a
)h
m
Otherwise...
o
else{
cthem
...hide
e
e
$( "div#WorkPhoneNum_Label" ).parent().hide();
r
d
i
tu
u
$( "[name='" + WorkPhoneNum.GetInputName() + "']"
).hide();
n
G
e
t
c en
$( "div#FaxPhoneNum_Label" ).parent().hide();
c"']"
a
$( "[name='" + FaxPhoneNum.GetInputName()
+
@ Stud).hide();
y
}
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
How this
example
ya -tranwas implemented:
a
n this example, navigate to Administration - Application > Manifest Administration
M Tonostart
and
a
d que
query
y tthe
eU
UI Objects applet
app et for
o Name
a e = Contact
Co tact Form
o Applet.
pp et In tthe
e as
as-delivered
de e ed
application, you will receive no results, as the Contact Form Applet has not yet been
customized.
Next, query for Name = DEFAULT FORM APPLET. This returns both the physical
renderer (phyrenderer.js) and presentation model (pmodel.js) for a default form applet.
Create two files according to instructions in subsequent lessons and give them easilyrecognizable names; for example, ContactFormPR.js and ContactFormPM.js.
Edit the two files to implement the customizations
Administer the two files in the views shown in this lesson.
GetInputName() vs. GetEI(): In subsequent lessons you will see the new GetEI() method
implemented to get control elements. The "old" (IP2013 and before) style of GetInputName()
still works, and is shown in this example.
2. Add Custom File(s) to the Manifest Files View

Navigate to Administration - Application > Manifest Files
Add any custom files you created
s
a
h
)
m
o
c de
e
Add your custom files to Administration
r
u Gui
t
- Application > Manifest
Files
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
3. If Necessary, Add Expressions to the

p
View
If the files should only apply under certain circumstances that
are not already defined as expressions, add expressions as
necessary
For example, a suggested practice is to create an expression
representing your User ID so your customizations are only
visible to you
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
tu
y@
Only SADMIN
will seeS
modifications
e
d
s
hiexpression
tthis
anthat use
p
e
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
4. Administer the Manifest to Include the Custom File(s)
Create manifest records that reference the custom files
Add manifest records for the Contact

Form Applet for the custom physical
renderer and presentation model
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
Add expressions
a
tu custom files
y@ s Specify
S
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Navigation:
The
n shown in the screenshot is Application - Administration > Manifest
a traview
y
a
Administration.
5. Test your Customizations

Start your application, navigate to a customized applet, and
verify its behavior
...and work and fax

numbers are visible
a
s
a
)h
m
Job Title is p
populated...
p
cofax numbers
are
and
e
e
...and work
r
d
i
tu notGshown
u
n
e
t
cc den
a
y@ s Stu
e
d
Job Title is empty....n
a e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Lesson Highlights
The manifest administration views determine what files are
downloaded to the Siebel Open UI client
Administration - Application > Manifest Files lists available files
Administration - Application > Manifest Expressions defines
true/false expressions
Administration - Application > Manifest Administration specifies
which files are associated with which object
To add custom JavaScript to Siebel Open UI:
s
a
h
Add the JavaScript files to the appropriate directory
)
m
o
c idet UI
Administer
Ad i i t the
th manifest
if t to
t apply
l the
th files
fil to
t the
th rappropriate
e
u Gui
t
object
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Practice
Modify a manifest to include custom files
Verify the results
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
5
Presentation Model
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Objectives
Describe the structure of a presentation model file
Describe how to create a custom presentation model file to
implement your own business logic
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Review: Proxy Framework
The proxy creates local representations of metadata objects

Creates a "shadow" copy of the business object associated
with the view
Creates a "shadow" copy of the business components
associated with the applets in the view
Creates a "shadow" copy of the applets
Creates a "shadow" copy of the controls in the applet
And so forth
s
a
h
These representations are managed as objects in a m)
co de
namespace in the client cache
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Review: The Presentation Model
Manages business logic on the client side

Allows client-side scripting without requiring code running on
the Siebel Server
Captures user behavior

Did th
the user lleave a control?
t l?
Exposes and manipulates Siebel object properties

Collects user changes to field values
The same presentation model can support different platforms
has
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
For example,
p , desktop
p and mobile clients
A Presentation Model Object

Is a client-side JavaScript object
Implements a particular UI component
For example, an applet, a toolbar, or so forth
Provides a logical abstraction layer of the repository metadata

Does not do any rendering of physical HTML
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Customizing the Presentation Model Examples
Create client properties

Example: A property to store a TRUE or FALSE setting used in
your logic
Retrieve user properties from the object definition in the

repository
Interact with the Siebel Server
Example: Call a server-side business service that invokes a
workflow
s
a
h
)
Caveat: Most presentation model customizations alsom
require
o
c changes
customization
t i ti off the
th physical
h i l renderer
d
tto di
display
l reth
the
hde
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
How to Customize a Presentation Model

You should extend an existing presentation model rather than
creating an entirely new one
Use a standard "scaffold" to build the extension
Details on the scaffold are on subsequent slides
To configure properties, methods, and bindings on the client,

extend the Init() method of the scaffold
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
This lesson's
an extends an existing presentation model using the Init() method.
ya -example
r
t
a
M non
To retrieve values from a property set sent by the Siebel Server,

Server extend the Setup() method of
the scaffold. For example, your script might request information on the applet's user
properties from the Siebel Server, and would need to parse the response. Setup() is beyond
the scope of this course, but is covered in detail in the Siebel Open UI - Advanced JavaScript
API course.
Example
Implement a new ShowJobTitleRelatedField property that is
TRUE if a contact record's Job Title field is populated
In a subsequent lesson you will modify the physical renderer to
hide fields if ShowJobTitleRelatedField is FALSE
If Job Title does not have a value, do not

display work and main phone
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
work and main phone
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Terminology
The presentation model's class instantiates the presentation
model object with a unique name
In JavaScript there is only one instance of the class/object at a
time
The constructor instantiates and defines the methods for the

class
A Namespace object maintains a list of objects instantiated in
the client cache
sa
ha
)
om
c
ure Guide
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
From http://www.phpied.com/3-ways-to-define-a-javascript-class/:
It is important to note
a tran
y
a
that
are
n- no classes in the original JavaScript specification. Functions can be used to
M there
noclasses,
simulate
but in general JavaScript is a class-less language. Everything is an object.
In terms of inheritance, objects inherit from objects, not classes from classes as in the "class"ical languages.
Siebel Open UI uses functions to simulate classes.
Implement a Presentation Model Customization

1.
2.
3.
4
4.
Verify the object class does not yet exist

Add the class to the namespace
Define the file and parent file(s) for the class
Implement a constructor function for the class
The constructor function includes your custom methods
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
More
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Example: Implement a ContactFormPM presentation model that extends the
standard form applet presentation model by setting a property to TRUE or
FALSE depending on whether or not the Job Title field is populated
1. Verify the Object Class does not yet Exist

To avoid possible conflicts, every presentation model file
should start with an if statement that checks whether or not
the class has already been implemented
Format:
if (typeof(SiebelAppFacade.yourClass)
(typeof(SiebelAppFacade.yourClass)==='undefined')
undefined )
{
Example code:
a
s
a
)h
m
codetermines
The 'if' statement
... // The rest of your code goes here
e
e
r
d
i
whether
tuthe classGhas
u already
}
n
e
been
implemented
t
cc den
a
// No else statement is required
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
SiebelAppFacade
a tranis a namespace used to register all classes. In subsequent slides you will
y
a
- your class to this namespace.
see
M hownotonadd
// 1. Run this code only if the class does not yet exist
if( typeof( SiebelAppFacade.ContactFormPM ) === "undefined" ) {
2. Add the Class to the Namespace

All new classes must be added to the SiebelAppFacade
namespace
This is accomplished using the Namespace() function of the
SiebelJS class
Format:
SiebelJS.Namespace( "SiebelAppFacade.yourClass" );
Example code:
s
a
h
)
m
o
Th SiebelJS.Namespace
The
Si b lJS N
callll adds
dd th
the
c de
e
r
class to the SiebelAppFacade namespace
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
// 2. Add this class to the SiebelAppFacade namespace
SiebelJS.Namespace( "SiebelAppFacade.ContactFormPM" );
3. Define the File and Parent File(s) for the Class

The define() method links the code to the manifest entries in
the database
Format:
define("yourFile", ["parentFile(s)"], function () {
It must return "SiebelAppFacade

SiebelAppFacade.className
className"
Example code:
// 3. Put in a define statement that defines the file and the
//
parent presentation model
define( "siebel/custom/contactformpmodel",["siebel/pmodel"], function ()
{
Use relative paths for the files and
// ... The rest of the code goes here
do not use suffixes
return "SiebelAppFacade.ContactFormPM";
a
s
a
)h
m
co de
e
r
u Gui
t
n
});
cce dent
a
Return the class
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
File Names:
By
Siebel Open UI matches the file name to the object the file is
n
a traconvention,
y
a
defining.
n- for this example, to clearly differentiate between the file and the object, the
M noHowever,
file name
is contactformpmodel.js, while the object is ContactFormPM.
Parent Files: The parent file is found by examining the default presentation model for the
object you are customizing. For example, if you are customizing a form applet, navigate to
Application - Administration > Manifest Administration, query for Name = DEFAULT FORM
APPLET, and verify that the default presentation model file is siebel/pmodel.
4. Implement a Constructor Function for the Class

1.
2.
3.
4.
5.
Declare the class as a function

Create the class constructor
Specify the class as an extension of its parent class
Add implementation code to the class
Add the custom methods for the class
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
4.1 Declare the Class as a Function
Declare the class as a function of SiebelAppFacade

Format:
SiebelAppFacade.yourClass = (function()
{
//class implementation code goes here
}());
Example:
a
s
a
)h
// Declare the ContactFormPM class
m
Si b l
SiebelAppFacade.ContactFormPM
d C
= ( f
function(){
i (){
co de
e
r
// ...Code that defines the class...
u Gui
t
n
} ());
ce ent
Since the "class" is actually a function, ac
@ Stud
the ending parentheses are required
y
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
JavaScript
has
nconcept of classes such as in other languages like Java or C++; everything
a trno
a
y
a
in
n-is an object. To simulate classes, use functions to create reusable objects.
MJavaScript
no'class'
Since the
is actually a function, the () at the end is required as part of a function
declaration.
4.2 Create the class Constructor

The constructor should call the superclass constructor to
instantiate the as-delivered object
Return the constructor at the end of your class declaration
Format:
function yourClass(proxy)
{
SiebelAppFacade.yourClass.superclass.constructor.
call(this, proxy);
s
a
h
}
)
om
c
ure Guide
t
// Create the constructor and call the superclass constructor
n
cce dent
function ContactFormPM( proxy ){
a
SiebelAppFacade.ContactFormPM.superclass.constructor.call(
this,
y@ s Stu
e
proxy);
d
hisuperclass constructor
tthe
an Call
p
}
e
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The proxy
object
the Siebel Open UI client proxy, containing the "shadow" objects,
n
a trarepresents
y
a
- Siebel data.
metadata,
and
M non
Example code:
Call vs. Apply: JavaScript provides two mechanisms for invoking a function: call(), which
accepts an object and an array of arguments, and apply(), which accepts an object and a
list of arguments. You will see both used in code examples in this course and the
documentation. In general, code written before IP 2014 used call(). For IP 2014, engineers
chose to switch to apply(). From a functional perspective there is no difference between the
two methods.
4.3 Specify the Class as an Extension of its Parent

Class
Use the SiebelJS.Extend() function to specify that the class is
an extension of its parent class
Allows you to use all the presentation model or physical
renderer methods from the Siebel JavaScript API
Format:
SiebelJS.Extend(yourClass,
SiebelAppFacade.ParentClass);
Example code:
s
a
h
)
// Make ContactFormPM an extension of its parent class
m
o
SiebelJS.Extend(ContactFormPM, SiebelAppFacade.PresentationModel
c de);
e
r
i
u Gu
t
Extend the
default
n
nt model
cce dpresentation
e
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
4.4 Add Implementation Code to the Class

Add the custom code that modifies the class' as-delivered
behavior
If you add no additional code, the class will behave exactly like
the parent class
A good debug method is to test your "unmodified"
unmodified class to
verify that it works as expected
Verifies that your scaffolding is correct
Use prototyping to add API methods to your class
a
s
a
For example, add the Init() method using
)h
m
yourClass.prototype.Init
y
p
yp
= function()
() {
co e
e
r
// call your Init() code, including
u Guid
t
n
// the Init() function of the superclass
cce dent
a
}
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Prototyping:
anprototype type in JavaScript is very powerful. It has several advantages:
ya -tThe
r
a
be added to an object at any point, and applies to all instantiated
M Anprototype
on can
objects as well
e as a
all future
utu e objects
objects. So p
prototyping
ototyp g a
allows
o s you to add functions
u ct o s o
or
attributes to an object even after that object has been instantiated.

A prototyped function or attribute can be overridden on an object-by-object basis. So if
you have an existing object and you want to override the prototype, you can just declare
that function or attribute in that object and it will override the prototype.
Most importantly, the prototyped function is visible outside of the original JavaScript file,
very much like public methods in "class-ful" languages. Therefore, you should prototype
your methods
th d tto make
k th
them available
il bl tto be
b used
d with
ith th
the Si
Siebel
b l API
API.
The Init() function must:

Call the superclass Init() function to initialize the asdelivered class
SiebelAppFacade.yourClass.superclass.Init.call(this)
;
The Init function may:

Include code that creates properties for the class, if any
this.AddProperty("yourPropertyName", "");
sif
Include code that creates or overrides methods for the class,
a
h
)
any
om
c de
this.AddMethod("NameOfMethodToOverride",
e
r
yourMethodName, {sequence:false, scope:this});
ntu Gui
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Format:
The
n for the Init declaration is:
a format
a
y
r
t
a
yourClass.prototype.Init
= function(){
M non Invoke any other available methods
Available Methods to Override: The available methods that can be overridden depend on
the object of your presentation model. For example, for a description of methods that can be
overridden for an applet presentation model, consult "Presentation Model Methods for
Applets" in Configuring Siebel Open UI, or consider taking the Siebel Open UI - JavaScript
API course from Oracle University.
For a full description of all presentation model methods, see "Classes and Methods of the
Siebel Open UI Application Programming Interface" in Configuring Siebel Open UI .
Some implementations may also require the Setup method to be overridden. This is true
when you want to add additional processing of the initial response from the Siebel server.
4.4 Add an Init Function
Example code:
// In the Init() method, add a property and two methods
ContactFormPM.prototype.Init = function(){
Declare the Init function
SiebelAppFacade.ContactFormPM.superclass.Init.call( this );
Add a property named
"ShowJobTitleRelatedField"
Call the superclass Init function
this.AddProperty( "ShowJobTitleRelatedField", "" );
a
s
a
)h
m
co applet
Override the "ShowSelection"
Similarly, override the "FieldChange"
e
e
r
d
i
method with a locally-defined
tu Gumethod
method with OnFieldChange
n
e
named
SelectionChange
c ent
c
a
this.AddMethod( "FieldChange", OnFieldChange, { sequence
: false,
@ Stud
y
scope: this } );
e
d this
};
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
AddProperty:
n function stores the property as local data on the client. So the object
a trThis
a
y
a
model
the
n-client now contains one additional property that is not part of the object model
M on
noserver.
from the
ShowJobTitleRelatedField is a local property that can be manipulated by the
this.AddMethod( "ShowSelection", SelectionChange, {
sequence : false, scope : this } );
presentation model.
AddMethod: This function allows you to add your method to an existing API method.
Whenever a user selects a new record, the ShowSelection() method is run. Use AddMethod
to add a custom "SelectionChange" method that runs whenever ShowSelection() is run.
ShowSelection: This applet method is an internal proxy method that Siebel Open UI calls
when it must display a record as the chosen record. Thus it is called when a record is
di l
displayed.
d
FieldChange: This applet method changes the value of a field in the applet. When a user
updates a field in the UI, FieldChange() is called. Use AddMethod() so that your custom
"OnFieldChange" method is called whenever FieldChange() is called.
4.5 Add the Custom Methods for the Class

For any methods you specified in the Init function, or any
additional custom methods you want to implement, add the
code for them below the Init function
Format:
function CustomMethod()
{
//Code to implement the method
}
Example code:
as
// Custom method that runs whenever a new record is selected ) h
function SelectionChange(){
{
om
Get the applet controls
c
var controls = this.Get( "GetControls" );

e control
ide
Gettu
ther JobTitle
var control = controls[ "JobTitle" ];
u
n
e nt G
c
Get the current value of the job title
c
a udecontrol );
var value = this.ExecuteMethod( "GetFieldValue",
@
t ( value ? true:
y
S
this.SetProperty( "ShowJobTitleRelatedField",
e
d
false ) );an
his
t
p
e
}
Set ShowJobTitleRelatedField
c tootrue
usor false, depending on whether job title is set
k
n
t
ya nse
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Complete Example Page 1 of 3
if(typeof(SiebelAppFacade.ContactFormPM) === "undefined"){
// 2. Add this class to the SiebelAppFacade namespace
SiebelJS.Namespace("SiebelAppFacade.ContactFormPM");
//
parent presentation model
define("siebel/custom/contactformpmodel", ["siebel/pmodel"],
function () {
s
a
h
)
m
o
c de
e
r
// Create the constructor and call the superclass constructor
u Gui
t
n
function ContactFormPM(proxy){
cce dent
SiebelAppFacade.ContactFormPM.superclass.constructor.call(this,
a
proxy);
y@ s Stu
e
}
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
// Declare the ContactFormPM class
SiebelAppFacade.ContactFormPM = (function(){
Complete Example Page 2 of 3
// Make ContactFormPM an extension of its parent class

SiebelJS.Extend(ContactFormPM, SiebelAppFacade.PresentationModel);
// In the Init() method, add a property and two methods
ContactFormPM.prototype.Init = function(){
// First call the superclass' constructor
SiebelAppFacade.ContactFormPM.superclass.Init.call(this);
// Then add the property and methods
this.AddProperty("ShowJobTitleRelatedField", "");
this.AddMethod("ShowSelection", SelectionChange, { sequence : false,
scope : this });
this AddMethod("FieldChange"
this.AddMethod(
FieldChange , OnFieldChange,
OnFieldChange { sequence : false,
false
scope: this });
s
a
h
)
m
o
c de
e
r
u Gui
t
};
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Complete Example: Page 3 of 3

// Our SelectionChange function: If JobTitle is not empty,
// set ShowJobTitleRelatedField to true
function SelectionChange(){
var controls = this.Get("GetControls");
var control = controls["JobTitle"];
var value = this.ExecuteMethod("GetFieldValue", control);
this SetProperty("ShowJobTitleRelatedField"
this.SetProperty(
ShowJobTitleRelatedField , (value ? true: false))
}
// If the Job Title field is modified, set ShowJobTitleRelatedField
// accordingly
function OnFieldChange(control, value){
if(control.GetName() === "JobTitle"){
this.SetProperty("ShowJobTitleRelatedField", (value ? true:
false));
}
}
return ContactFormPM;
} ());
return "SiebelAppFacade.ContactFormPM";
});
}
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Review: Presentation Model Structure
1. Verify that class does not exist

2. Add class to namespace
3. Define the file and parent(s)
( )
4. Class constructor
s
a
h
)
m
o
c properties
e
e
5.rCustom
d
i
u methods
tand
uare added
n
G
e
t
cc detonthe Init() method
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Lesson Highlights
To create a custom presentation model, create a JavaScript
file and:
Implement
I l
t a constructor
t t function
f
ti for
f the
th class
l
The constructor function should:
Declare the class

a
Call the superclass constructor
s
a
)h
Specify the class as an extension of the presentationomodel
m
c deto the
e
Include an Init function that adds properties and
methods
r
u Gui
t
n
class
cce dent
a
Include the custom methods for the
y@class tu
e is
d
n
a e th
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Practice
Create a new presentation model
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
6
Physical Renderer
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Objectives
Describe the structure of a physical renderer file
Describe how to create a custom physical renderer file to
customize the physical appearance of the application
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
The Physical Renderer

Is responsible for constructing the User Interface (UI)
Can use native or third-party controls
For example, many of the as-delivered controls are derived
from the open source JQuery library
All
Allows records
d (th
(thatt iis, th
the same presentation
t ti model)
d l) tto b
be
displayed in different ways on different views
Lists
Forms
Carousels
And so forth
s
a
h
)
m
o
c de
e
r
u Gui
t
n
t different
Allows records to be displayed in different
waysen
on
cce
a
@ Stud
platforms
y
e
d this
n
For example, desktop versus
mobile
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
A Physical Renderer Object

Is a client-side JavaScript object
Takes logical data and generates a physical rendering of it in
HTML
Relies on an existing presentation model for its data
Provides a binding layer to the presentation model, binding
HTML elements to presentation model structures
Generates the physical HTML

This rendering includes references to CSS style sheets for as
h
layout, colors, fonts, and so forth
m)
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
New Features
a trinanIP2014: Siebel Open UI has significant updates to the physical renderer
y
a
mechanism
M nonin- IP2014:
ug wrappers
appe s a
allow
o de
developers
e ope s to write
te co
controls
t o s independent
depe de t o
of app
applets.
ets
Plug-in
The developer writes the code for the control, not concerning him- or herself with
the implementation details of the underlying applet.
- The developer attaches the control to applets based on a conditional function he or
she writes.
The HTML template manager provides a method to generate HTML code for controls
- For example,
p , add the HTML code for the once the p
plug-in
g wrapper
pp has g
generated
the control.
-
This course focuses on "basic" customizations that involve changing the applet-level physical
renderer. For more information on plug-in wrappers and the HTML template manager,
consider taking Oracle University's Siebel Open UI - Advanced JavaScript API course.
Customizing the Physical Renderer Examples

Show or hide a field or applet based on a property value in the
presentation model
Instead of showing sets of records in a list, show them in a
different format, for example:
A carousell
A timeline
And many more
Use platform-specific rendering code to provide a different as

h
look-and-feel depending on the platform
m)
co de
e
r
u Gui
t
n
And many more
cce dent
a
u
Most "branding" of the Siebel applications
some
y@ s Stinvolves
e
d
i
modification to physical renderer
th
an efiles
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
For example, desktop or mobile
How to Customize a Physical Renderer

Usually, you should extend an existing physical renderer
rather than creating an entirely new one
Use a standard "scaffold" to build the extension
Details on the scaffold are on subsequent slides
To bind handlers to notifications from the presentation model,

extend the Init() method of the scaffold
To customize how controls are displayed, extend the ShowUI()
a
method of the scaffold
s
a
)h
m
To bind data or events to a physical control, extend o
the
c de
e
r
BindData() or BindEvents() methods of the scaffold
tu
ui
n tG
e
c
c den
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
This lesson's
example
a tran extends an existing physical renderer using the Init() method.
y
a
Binding
n- to notifications: When an event occurs in the presentation model; for example, the
M nhandlers
o
value of a presentation model property changes, a notification is sent to the physical renderer. The
physical renderer must have an AttachPMBinding() call that monitors this notification and invokes a
method. Add AttachPMBinding() calls to the Init() method of the physical renderer to handle
presentation model notifications.
Method invocation: All three methods, ShowUI(), BindData(), and BindEvents() are run once
when the control (for example, applet) is loaded. The example in this lesson is designed to update the
UI immediately when a field value changes. The correct method in this case is AttachPMBinding(),
attaching a Physical Renderer method to a Presentation Model method so that once the Presentation
M d l method
Model
th d completes
l t (f
(for example,
l to
t update
d t a value
l in
i the
th metadata),
t d t ) the
th Physical
Ph i l R
Renderer
d
method runs (for example, to show or hide a field in the UI).
Plug-in wrappers: Controls can be built using separate physical renderer files known as "plug-in
wrappers".
Event Helper: As of IP2014 there is an EventHelper object that helps make events more abstract; for
example, both a mouse click on a desktop machine and a tap on a touchpad are "down" events for the
event helper. Details on plug-in wrappers, the HTML template manager, and the event helper are all in
O l University's
Oracle
U i
it ' Siebel
Si b l O
Open UI - Advanced
Ad
d JJavaScript
S i t API course.
Example
Show or hide controls based on the value of the
ShowJobTitleRelatedField property in the presentation model
Uses AttachPMBinding() to update the UI whenever the
presentation model property is updated

work and main phone
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
If Job Title does not have a value, de
do not display work and mainpphone
an e thi
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Implement a Physical Renderer Customization

1.
2.
3.
4
4.

Define the file and parent file(s) for the class
Implement a function for the class
The function includes your custom methods
s
a
h
Example: Implement a ContactFormPR physical renderer that extends the m)
co de
standard form
f
applet physical renderer by reading a property from
f
the
e
r
ifields
u certain
t
presentation model and using it to determine whether or not tonshow
u
G
cce dent
a
y@ s Stu
e
d
an e thi
More
p
c
s
k to u
n
a
ay ense
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
1. Verify the Object Class Does Not Yet Exist

To avoid possible conflicts, every physical renderer file should
start with an if statement that checks whether the class has
already been implemented
Format:
if (typeof(SiebelAppFacade.yourClass)
(typeof(SiebelAppFacade.yourClass)==='undefined')
undefined )
{
Example code:
if( typeof( SiebelAppFacade.ContactFormPR ) === "undefined" ){
s
a
h
)
m
... // The rest of your code goes here
o
The 'if' statement
c determines
e
e
r
}
d
whether
the
class
has
already
i
tu Gu
n
been implemented
e
cc dent
// No else statement is required.
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
2. Add the Class to the Namespace

All new classes must be added to the SiebelAppFacade
namespace
This is accomplished using the Namespace() function of the
SiebelJS class
Format:
SiebelJS.Namespace( "SiebelAppFacade.yourClass" );
Example code:
s
a
h
)
m
o
c de
e
r
The SiebelJS.Namespace call adds the
u Gui
t
n
class to the SiebelAppFacade namespace
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
// 2. Add the class to the SiebelAppFacade namespace
SiebelJS.Namespace( "SiebelAppFacade.ContactFormPR" );
3. Define the File and Parent File(s) for the Class

The define() method links the code to the manifest entries in
the database
Format:
define("yourFile", ["parentFile(s)"], function () {
It must return "SiebelAppFacade

SiebelAppFacade.className
className"
Example code:
//
parent physical renderer
define( "siebel/custom/contactformphyrenderer", ["siebel/phyrenderer"],
function () {
Use relative paths for the files and do not use suffixes
a
s
a
)h
m
co de
e
r
u Gui
t
// ... The rest of the code goes here
n
ceclass ent
return "SiebelAppFacade.ContactFormPR";
cthe
Return
a
@ Stud
});
y
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
File Names:
By
Siebel Open UI matches the file name to the object the file is
n
a traconvention,
y
a
defining.
n- for this example, to clearly differentiate between the file and the object, the
M noHowever,
file name
is contactformphyrenderer.js, while the object is ContactFormPR.
Parent Files: The parent file is found by examining the default presentation model for the
object you are customizing. For example, if you are customizing a form applet, navigate to
Application - Administration > Manifest Administration, query for Name = DEFAULT FORM
APPLET, and verify that the default physical renderer file is siebel/phyrenderer.
4. Implement a Function for the Class

1.
2.
3.
4
4.
5.
Declare the class as a function

Specify the class as an extension of its parent class
Add implementation code to the class
Add the custom methods for the class
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
4.1 Declare the Class as a Function
Declare the class as a function of SiebelAppFacade

Format:
SiebelAppFacade.yourClass = (function()
{
//class implementation code goes here
}());
Example:
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Self-Invoking
By default, JavaScript functions are not invoked until called.
n
a trFunctions:
a
y
a
Functions
form
M noinn-the
(function
() {
// Declare the ContactFormPR class
SiebelAppFacade.ContactFormPR = ( function(){
{
// ...Code that defines the class...
} ());
Since the "class" is actually a self-invoking
function, the ending parentheses are required
put your code here

})():
are self-invoking, and run when the file is downloaded to the client. Thus, your class is
implemented by being a self-invoking function.
4.2 Create the Class Constructor

When Open UI calls the constructor, it passes it the
presentation model object
The constructor should use this to call the superclass
constructor to implement all the required methods and
attributes
Format:
function yourClass(pm) pm = The presentation model object
{
SiebelAppFacade.yourClass.superclass.constructor. s
ha
call(this, pm);
)
}
com
e
e
r
d
i
Example code:
tu Gu
n
e
// 5. Call the superclass constructor
cc dent
a
function ContactFormPR( pm ){
y@ s Stu
e
SiebelAppFacade.ContactFormPR.superclass.constructor.call(
this, pm
d
i
n
h
);
t
a
cp use Call the superclass constructor
}
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
4.3 Specify the Class as an Extension of its Parent

Class
Use the SiebelJS.Extend() function to specify that the class is
an extension of its parent class
Format:
SiebelJS.Extend(yourClass,
SiebelAppFacade.ModelOrRenderer);
Example code:
// 6. Make ContactFormPR an extension of its parent class
SiebelJS.Extend(ContactFormPR, SiebelAppFacade.PhysicalRenderer );
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Extend the parent presentation
model or physical renderer

Extend the Init() method to call AttachPMBinding() for each
notification handler
Format:
this.AttachPMBinding( "<PropertyName>",
<MethodToCallIfItChanges>);
Example code:
// Bind the ShowJobTitleRelatedField variable from the
// presentation model to the ModifyLayout method of this object
ContactFormPR.prototype.Init = function () {
SiebelAppFacade.ContactFormPR.superclass.Init.call(this);
this.AttachPMBinding( "ShowJobTitleRelatedField", ModifyLayout
);
a
s
a
)h
m
co de
e
r
u Gui
t
n
nttime there is
cce devery
The ModifyLayout method of this physical renderer will be
executed
e
a
@ ofSthe
a change in value of the ShowJobTitleRelatedFieldyproperty
tupresentation model
e
d
an e this
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The ShowJobTitleRelatedField
property is a custom property that was used as an example in
a tran
y
a
the
on- customizing the Presentation Model.
M lesson
non

For any custom methods you want to implement, add the
code for them
Use this.GetPM() to get controls and variables from the
presentation model
Format:
function CustomMethod()
{
//Code to implement the method
}
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Example code:
Get the applet controls and the
ShowJobTitleRelatedField property
function ModifyLayout( ){
var controls = this.GetPM().Get( "GetControls" );
var canShow = this.GetPM().Get( "ShowJobTitleRelatedField" );
var WorkPhoneNum = controls[ "WorkPhoneNum" ];
var FaxPhoneNum = controls[ "FaxPhoneNum" ];
if( canShow ){
specifically, get the WorkPhoneNum
$( "span#WorkPhoneNum_Label"More
).parent().show();
and FaxPhoneNum
controls
$( "[name='" + WorkPhoneNum.GetInputName()
+ "']"
).show();
$( "span#FaxPhoneNum_Label" ).parent().show();
$( "[name='" + FaxPhoneNum.GetInputName() + "']" ).show();
}
Show WorkPhoneNum and
else{
FaxPhoneNum
if the property is true
$( "span#WorkPhoneNum_Label"
#
k h
b l )
).parent().hide();
() hid ()
$( "[name='" + WorkPhoneNum.GetInputName() + "']" ).hide();
$( "span#FaxPhoneNum_Label" ).parent().hide();
$( "[name='" + FaxPhoneNum.GetInputName() + "']" ).hide();
}
Otherwise hide them
}
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Review: Physical Renderer Structure
1. Verify that the class does not exist

2. Add the class to
the namespace
3. Define manifest metadata

4. Class
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
methods
are added
n within
ththei class
aCustom
p
e
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Lesson Highlights
To create a custom physical renderer, create a JavaScript file
and:

D fi th
Define
the manifest
if t record
d ffor the
th class
l
Implement a function for the class
The function should:

Declare the class
s
a
h
)
Call the superclass constructor
m
o
c de
e
Declare the class as an extension
r
u Gui
t
n
t
Extend the Init() method to handle presentation
cce denmodel
a
notifications
y@ s Stu
e
d
i
Include the custom methods
anfor thethclass
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
Practice
Create a new physical renderer
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
7
Debugging
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Objectives
Use SiebelJS.Log() to log messages to the console
Use the debugger statement to add breakpoints to scripts
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Suggestions for Debugging a Script
If a script does not appear to be running correctly:

Use the browser's developer tools to verify that the script was
downloaded to the client
Use SiebelJS.Log() statements to log script status
messages
Use debugger statements to hard-code breakpoints
Use the browser's developer tools to perform additional
debugging
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Browser Developer Tools

Most modern browsers have built-in developer tools that
provide:
An inspector to examine the HTML elements and CSS style
You can perform inline modification of the CSS rules to see how
those changes affect the look
look-and-feel
and feel
An inspector to examine JavaScript and CSS files that have

been downloaded to the client
A debugger to set breakpoints in the JavaScript code
A console to allow interaction with JavaScript objects
has
)
m
o
Browsers that provide built-in developer tools include
c Google
e
e
r
d
i
tu8 orGhigher
u
Chrome, Mozilla Firefox, and Internet Explorer
n
e
t
cc den
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Console:
For
n reasons, Open UI disables console access to JavaScript objects, so
a tsecurity
a
y
r
a
- is not available for Siebel Open UI.
this
M functionality
non
Invoke Developer Tools

Each browser may have a different method of invoking the
tools:
Google Chrome: F12, CTRL+Shift+I, or right-click
Mozilla Firefox: CTRL+Shift+I, or right-click
Microsoft
Mi
ft Internet
I t
t Explorer:
E l
F12
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
tu or Mozilla Firefox,
y@ s Chrome
S
e
In Google
d
thi and select Inspect element
an right-click
p
e
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Verify the Script was Downloaded

Each developer tool has a method for determining the files
that have been downloaded to the client
For example, the Sources tab for Google Chrome
If your code does not appear to be working, the first step is to

verify
if that
th t it has
h been
b
downloaded
d
l d d
Use the Errors icon to check for JavaScript errors
s
a
h
In Google Chrome, the Sources tab lists all JavaScript
)
m
and CSS files that have been downloaded
o
c de
e
r
u Gui
t
n
Click the Errors
to see
JavaScript
nthet any
cceicondwith
e
errors a
associated
current page
y@ s Stu
e
d
Verify
that your tcustom
hi JavaScript
anhas
p
e
c o usbeen downloaded
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Reasons for Failure to Download

There are several reasons your file(s) may fail to download,
the most common being:
An improperly-configured manifest
Errors in the JavaScript itself
The inspector
Th
i
t informs
i f
you off JavaScript
J
S i t errors and
d allow
ll
you tto
examine them
a
s
a
)h
m
co de
e
r
ucase Gui
t
Review the errors and the files they are in; for example, innthis
t
a file is missing, indicating an improperly-configured
n
ccemanifest
e
a
@ Stud
y
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
Checking
the
If the file fails to download at all, first make sure that the path to the
n
a trmanifest:
a
y
a
- in the Manifest Files view. Then make sure the file is applied to the correct
file
M is included
nothen Manifest Administration view. Finally, check the Manifest Expressions to make
object in
sure that they are allowing the file to be downloaded. For this particular example, the file
name had a typo in it and hence the file could not be found.
Use SiebelJS.Log()
Use SiebelJS.Log() to log messages to the console

Acts like println(), but prints to the inspector console
Use val() to get values of elements in the physical renderer
Use GetFieldValue() to get values of controls in the
presentation model
Example code from AccountFormPR:

// Example of using the input element of the physical renderer
var strCityValue = $('input[aria-label="City"]').val(); Use val() if you know the
SiebelJS.Log("The value of City is " + strCityValue);
name of the element
s
a
h
)
m
o
c de
// Example of using the GetFieldValue() method of the presentation
e
r
ithe control
uthe name
t
u
// model Use GetFieldValue() from the presentation model if you know
of
n
G
e nt
var controls = this.GetPM().Get("GetControls"); cc
a
de
u
var PostalCode = controls["PostalCode"]; y@
t
e" + is S
d
SiebelJS.Log("The value of PostalCodenis
a e th PostalCode));
p
this.GetPM().ExecuteMethod("GetFieldValue",
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
This code
example
ya -tranis custom code related to the practice.
a
Both
M examples
on produce the same results: The console will display
n
The value of City is <City Name>
The value of Postal Code is <Postal Code>
The difference is whether you want to work with control names from the presentation model,
or element names from the physical renderer.
Also be careful about order of execution. Using the input.val() method reads the current value
f
from
the
th display;
di l
iin practice,
ti
thi
this may di
display
l th
the value
l ffrom th
the previously-selected
i
l
l t d record.
d
You must write your code in such a way that this call is made after the page is fully loaded.
Using GetFieldValue() gets the current value from the presentation model, and is more robust.
Output of SiebelJS.Log()
Examine the console to see the output

Output from all log statements appears in execution order in the
console
If you have log statements in multiple files at once, consider
adding the file name and line number to each log statement
s
a
h
)
m
o
c de
e
r
Log statements are
shown
u errorGui
t
n
along with warnings
and
nt
ccinethe dconsole
messages
e
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
The debugger Statement
Is used to hard-code breakpoints in your scripts

Useful if your developer tool does not include breakpoints, or if
you only want to set breakpoints in a few source files
Usage:
debugger;
The browser developer tool stops on the statement if the
inspector is open
Behavior is exactly like a breakpoint set in the tool
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
i
If the inspector
the
tool
thdeveloper
anis open,
p
e
will stop
execution
at
a
debugger
statement
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Debugging Using Browser Developer Tools

Most browser developer tools provide standard debugging
functionality:
Set and clear breakpoints

Set watch expressions
E
Examine
i th
the callll stack
t k
Examine variables
And so forth
s
a
h
)
m
o
c de
e
r
Examine variables, review
tu Gui
the call stack, and so forth en
cc dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Recommendations
Become familiar with the developer tools in your browser of
choice
Use code quality tools such as JSLint (http://www.jslint.com/)
Use debugger and SiebelJS.Log() sparingly, and remove
such
h calls
ll b
before
f
going
i tto production
d ti
Avoid calls such as alert() that may be missed when going
from testing to production
While debugger and SiebelJS.Log() are "invisible" to as
)h
normal users, alert() displays an alert the end userm
sees
co
e
e
Test all browser and device combinations before
moving
to
r
d
i
tu Gu
n
e
production
nt
cc
a ude
@
t
y
S
e
d
an e this
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Lesson Highlights
To debug JavaScript code:

Use the browser's inspector to verify that the files have been
downloaded, watch variables, examine the stack, and so forth
Use SiebelJS.Log() calls to verify that the code has
reached certain points or to output variable values
Use debugger calls to hard-code breakpoints
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Practice
Explore debugging options
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
8
Cascading
C
di St
Style
l Sh
Sheets
t and
d
Open UI Themes
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Objectives
Describe Cascading Style Sheet (CSS) Files
Identity the CSS rules associated with a UI element
Add style rules to an existing Siebel Open UI theme
Implement a new Siebel Open UI theme
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Review: Cascading Style Sheets (CSS)

Consist of a set of styling rules that specify how content in an
HTML document is to be displayed
Separates the document presentation from the document
content
Allow a set of styling rules to apply to multiple web pages

Modifying the presentation of a large website can be performed
by editing a single set of CSS files
Include rules that specify how to lay out block-level elementss

defined in the HTML source
) ha
om
c
ure Guide
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
For
F example,
l <di
<div>
> elements
l
t
CSS Rules
Consist of one or more property value pairs that describe how
an element in the HTML is to be rendered
The most basic format is:
<Element> {
attribute1: value1;
attribute2: value2;
;
}
Example:
s
a
h
)
BlueButton ( font-family: arial
m
o
font-size: 12px;
c de
e
r
i
color: white;
Styling information
information tu
Styling
u
HTML element
n
G
font-weight: bold;
for that
that element
element
for
being styled
cce dent
background: blue }
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
More Advanced CSS Rules

The . prefix indicates styling information for HTML elements
whose class attribute matches the string
Example:
.center {
text-align:
text
align: center;
color: red;
}
This styling applies to HTML

elements that have their
"class" attribute set to center
The # prefix specifies a specific element id
s
a
h
)
#para1 {
m
o
text-align: center;
c de
This styling applies the HTML
e
r
color: red;
u Gui
elements with ID = para1
t
n
}
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Example:
A colon : is reserved to indicate an action on an element

Example:
a:hover {
text-decoration:underline;
}
When a user hovers over

element a, underline the text
Additional techniques include grouping selectors, using

element types with classes, and so forth
Examples:
as
body, td, input, select, textarea {
For body, td, input, select, ) h
For body, td, input, select, or textarea
font-family: Arial;
m
or textarea elements,
oset
elements set the font to red
elements,
Arial
c
color: red;
the font to rred
Arial
e
e
d
i
}
tu Gu
n
e
cc dent
body.center {
a
For all body
u with a "class"
@ elements
t
text-align: center;
y
S
e
attribute
d tofhi"center",
s center the text
}
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non

Finally, the @ sign is reserved to indicate something the
browser must do
Import a file, include a font, and so forth
Example:
Information on where the browser
@font-face {
can find the Roboto font family
font-family: 'Roboto';
src: url('../fonts/Roboto-Light-webfont.eot');
src: url('../fonts/Roboto-Light-webfont.eot?#iefix')
format('embedded-opentype'),
url('../fonts/Roboto-Light-webfont.woff')
format('woff'),
url('../fonts/Roboto-Light-webfont.ttf')
format('truetype'),
url('../fonts/Roboto-Lightwebfont.svg#robotolight')
format('svg');
font-weight: 300;
font-style: normal;
}
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Conflicting CSS Styles

Multiple contradictory styles might apply to a single HTML
element
For example, one style might left-align the text, while a second
might center it
"Specificity"
Specificity determines which style is applied
The more specific the styling, the higher its specificity
For example, styling for a specific element ID takes precedence
over class styling for that element
a
s
a
h
Within a specificity level, the "last to be applied" style m
takes
)
o
c de
precedence
e
r
i
uapply
t
u
n
In Siebel Open UI, this is any custom style
you
G
cce dent
a
Caveat: Styles marked with !important
@ take
tu precedence
y
S
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
Reference:
For
n information on specificity, consult any reliable web page on Cascading
a tramore
y
a
- for example, https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity.
Style
M Sheets;
non
The !important tag: If the !important tag is used multiple times, the last to be applied
takes precedence.
Location of CSS Files

All CSS files are in subdirectories of
..\<webserver>\public\<lang>\files
As-delivered Siebel Open UI CSS files are in this directory
Third-party files are in the 3rdParty subdirectory
Custom
C t
files
fil should
h ld be
b placed
l
d iin th
the custom
t
subdirectory
bdi t
s
a
h
)
m
o
CSS files on the
c de
e
Siebel Web Server
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The folder
contains
ya -tran CSS files for both the Open UI and the HI client.
a
M non
Custom CSS files should be placed in the custom directory to ensure they will not be
overwritten by patches or updates.
Examining CSS Rules

Use the Inspect Element functionality in the browser to display
the CSS rules that render an Open UI element
Right-click any element in the UI
and select Inspect element
s
a
h
)
m
o
c de
e
r
u Gui
t
Strikethrough text indicates styles n
that
t
were overridden in another file
n
ccoreclass
e
a
@ Stud
y
Some of
the
e
dstylesthis
n
applied
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
Screenshot:
anscreenshot is from the bottom of Accounts > My Accounts.
ya -tThe
r
a
M non
The CSS files associated with

the rules being applied
Browser: The browser used in the screenshots is Google Chrome

Chrome. Other browsers will have
different appearances.
Theme
Is one or more cascading style sheets that implement a
consistent look and feel for the user interface for a web
application
Typically specifies:
A coordinated
di t d sett off colors,
l
ffontt styles
t l and
d sizes,
i
and
d so fforth
th
The look and style of various user interface elements such as
menu buttons
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Themes
are
sometimes
ya -tran referred to as skins.
a
M non
Themes for Siebel Open UI
Siebel Open UI applications:

Are delivered with a small set of themes
Allow each user to select a theme
As-delivered themes include the Aurora theme for tab, tree,

and
d side
id menu
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Selecting a Different Theme
Each user can select one of the available themes
Navigate to Tools > User Preferences > Behavior

Select the Navigation Control type
Select a theme
S
Save
your preferences
f
Refresh the page to apply the new theme
a
s
a
)h
m
Select a tab (horizontal)
o
or tree (vertical) tab layout rec

e
d
Select a navigation control type
i
tu Gu
n
e
cthemeent
Select the desired
c
a
Select a theme
for the selected
ud
@ tabStlayout
y
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
Navigation
Control
a tran Type: Recall that the available navigation control types are Tab, Tree,
y
a
and
Menu.
M Side
non
Defining a Theme
There are three steps to define a theme:

1. Create a custom CSS file
2. Register the CSS file with the application
3. Administer the list of values (LOV) to allow users to select the
theme associated with the CSS file
During development, it may be useful to test your changes

by modifying an existing theme before creating a new one
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Modify an Existing Theme

1.
2.
3.
4
4.
5.
Locate the styling rules

Edit the rules
Create the CSS file
Test the modified theme
s
a
h
)
Example: Modify the style of the applet header
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
1. Locate the Styling Rules

Select the UI element to be modified
Use the Inspect element functionality to display the associated
styling rules
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
2. Edit the Rules

Locate the rules with the desired properties
Edit each rule inline
Modified styling is applied immediately
Allows developers to:
Verify they have located the relevant CSS rule

Determine the property changes required to implement a desired
rendering change
a
s
a
)h
m
cothe e
get
Verify you
e
r
id
u result
desired
t
u
n
G
cce dent
a
Change color, size, and
y@ s Stu
e
font of header inline
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The edits
you
n inline are not saved back to the CSS files. You can always revert back to
a tmake
a
y
r
a
- rules by reloading the page in the browser. To make the changes
the
styling
M original
nonyou must copy the modified rules to a CSS file. You will do this in the practice.
permanent,
3. Create the CSS File: Copy the Modified Rules to a

New File
Select the customized rules

Be sure to select the entire rule, not just the customized part
Copy the rules and paste them into a new .css file
Use a text editor of your choice
Optionally, edit the rule to reduce the number of affected

classes
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
3. Create the CSS File: Save the File

All customer created CSS files should be stored separately
from the as-delivered CSS files to minimize issues when the
application is upgraded
Save the file in the custom CSS directory
Th
The path
th is
i <webserver>\PUBLIC\<lang>\files\custom
\
\
\
\
Caveat: CSS files may contain relative path references to
image files
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The recommended
a tranpractice is to store customer-created CSS files in a separate custom
y
a
folder.
if you created BlueSkin.css, you could store the file in
M nForonexample
<webserver>\public\<lang>\files\custom.
You would need to update any relative file paths in
Modify the relative paths before saving the file
the file.
4. Administer the Manifest

Add your custom file to the Manifest Files view
Add your custom file to the theme
Navigate to the Manifest Administration view
Duplicate the theme record
Add your file as an additional file to the theme
1. Duplicate the platformdependent Theme record
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
n you thi 3. Add your file
atheme
2. Select the
p
cmodifyinguse
are
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
5. Test the Modified Theme

Clear the browser cache
If necessary, navigate to Tools > User Preferences > Behavior
and select the modified theme
Reload the Siebel client web page to force the new .js and
.css files
fil tto b
be d
downloaded
l d d tto th
the b
browser
Verify the application is rendered using the new theme
s
a
h
)
m
Verify your theme is applied
o
c de
e
throughout the application
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
5. Test the Modified Theme: Verify the Rules

Optionally use the element inspector to verify that the relevant
styling rules are updated
Custom CSS file
s
a
h
)
m
o
c de
e
r
u Gui
t
Updated property
n
values appear
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Create a Custom Theme

1.
2.
3.
4
4.
Create the style sheets

Add the theme to the theme list of values
Test the custom theme
Example: Create a new theme (named wasabi) that displays green buttons
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
1. Create the Style Sheets

For a new theme that differs significantly from an as-delivered
Siebel theme, create the required style sheets using an
appropriate editing tool
For a new theme that is a slight modification of an asdelivered Siebel theme:
Identify the rules to be modified
Edit the rules
Copy the rules into a custom CSS file
s
a
h
)
In either case, it is very useful to examine an existing m
theme
o
c de
fil to review
file
i
the
h available
il bl Si
Siebel
b l CSS classes
l
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Existing
Themes:
a tranExisting themes end in theme.css and are located in
y
a
..\<webserver>\PUBLIC\<lang>\files.
1. Create the Style Sheets

Example: Modify the as-delivered Aurora theme to use light
green buttons
Create a custom rule and save it as theme-wasabi.css
Allow the as-delivered Aurora theme to manage all other
content
.appletButton {
Override applet button color
color: #fff;
background-color: #38ff00;
border-color: #385427;
}
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
File Names:
While
a tranthere are no enforced file naming conventions, new themes should start
y
a
-to identify them as theme files.
with
M "theme"
non
2. Add the Theme to the List of Values

Navigate to Administration - Data > List of Values
Create a new list of values entry and set:
Type = OUI_THEME_SELECTION
Display Value = user friendly name for the theme
Language-independent Code = theme name to be used in
expressions
Parent LIC = NAVIGATION_TAB, NAVIGATION_TREE, or
NAVIGATION_SIDE
a
s
a
)h
Clear the LOV cache
m
Parent LIC identifies for
co de
e
which navigation type the
r
u Gui
t
theme is supported
n
cce dent
a
y@ s Stu
e
d
an e thi
p
Create a new LOV value

c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
You choose
the
n of the Parent LIC depending upon whether the theme is tab, tree, or
a travalue
y
a
side-oriented.
n- If your theme applies to multiple navigation types, create multiple LOV records,
M noeach
one with
Parent LIC type.

Add the theme to the Manifest Files view
Create an expression that identifies the theme based on the
user's current settings
Example:
LookupName (OUI_THEME_SELECTION,
(OUI THEME SELECTION Preference
("Behavior", "DefaultTheme")) = "WASABI_THEME"
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non

In the Manifest Administration view, add the theme to the
PLATFORM DEPENDENT themes
If your theme depends on another theme, load that theme first
Edit the platformdependent theme record
s
a
h
)
m
o
c de
e
r
i with
u file,Galong
t
u
Add yourntheme
e on which
t it depends
any
n
ccfiles
e
a
@ Stud
y
e
d this
n
Add your theme
expression
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
4. Test the Custom Theme

Clear the browser cache
Select the new theme
Reload the Siebel client web page to force the new .js and
.css files to be downloaded to the browser
Verify the application is rendered using the new theme
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
Wasabi is
y@ s Stu
e
now available
d
an e thi
Wasabi has been
p
c
s
applied
u
k
n
o
t
ya nse
a
(m lice
y
e
nd rable
a
P sfe
k
n
Navigation:
Set
n under User Preferences > Behavior.
ya -trathemes
a
M non
Lesson Highlights
Siebel Open UI uses cascading style sheets to define the look
and feel of elements in the client UI
Use the element inspector to examine and edit the rules
A theme is a collection of cascading style sheets that

i l
implement
t a consistent
i t t llook
k and
d ffeell ffor th
the user iinterface
t f
ffor
an application
Modify an existing theme by:
Creating an additional style sheet with the modifications
Adding the style sheet to the theme
m)
has
co e
e
r
Create a new theme by:
u Guid
t
n
Creating one or more style sheets
cce dent
a
Administering the theme LOV ey@ Stu
d this
n
a
Administering the theme's
CSS
p usfiles
e
c
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
P sfe
k
n
ya -tran
a
M non
Practice
Identify style sheets

Locate styling rules
Modify an existing theme style sheet
Add a new style sheet to a theme
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
9
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Objectives
Define Siebel mobile applications
Describe the Siebel mobile application architecture
Describe the architecture of Siebel Disconnected Mobile
applications
Enter and exit disconnected mode
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Siebel Open UI Foundations 9 - 2

Are Siebel applications configured for use on mobile devices
such as tablets and smart phones
Use the same Siebel Open UI framework as regular Siebel
applications to render the mobile application in a mobile
browser on a mobile device
Mobile devices must support the JS and HTML standards
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
fe can be used on mobile devices such as the iPhone, iPod, iPad,
k Papplications
s
n
Siebel a
Mobile
n
a smartphones, and so forth.
y
trand
Android
n
Ma ntablets
o mobile specific version of the standard desktop version of an application is a
Configuring a mobile-specific
The Siebel Service mobile application
common industry practice. The URL for the mobile version usually differs from the URL for the
standard version.
Mobile Application Modes
Connected:
Users use their device's standards-compliant web browser to
access the application using the appropriate URL
The architecture is the same as when using a desktop browser
Disconnected:
Di
t d
Application data, JavaScript, and CSS files from the server are
cached in the device's browser cache
Users use the same browser and URL as in connected mode
s
a
h
Work with Siebel data without a network connection
)
m
o
c is re
Synchronize
S nchroni e Siebel data once a net
network
ork connection
re-e
e
r
i
u Gu d
t
established
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Data filters:
Administrators
can set data filters to determine what data is downloaded to
a tran
y
a
- mobile clients. See Siebel Mobile Guide: Disconnected for more details on
disconnected
M nonthese
configuring
filters.
As-Delivered Siebel Mobile Applications

Several as-delivered applications have been configured for
connected mobile use:
Consumer Goods, Finance, Pharma, Sales, and Service
Applications that support disconnected are:

Service and Pharma
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
Each Siebel
mobile
ya -tran application requires a separate license.
a
M non
Adding disconnected support for Consumer Goods

Goods, Finance
Finance, and Sales is on the product
roadmap.
User Experience
Siebel mobile applications are configured to work like typical
applications for mobile devices
Display smaller sets of data
Use touch navigation
The navigation tree is only shown
if the screen is wide enough
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
(Not shown) Only 8
e
d
fields in the form applet
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Only 5 records in the list applet
Features
Uses the mobile device's standards-based browser to access
the application
The browser accesses a Siebel Web Server
Users see the same data in mobile or desktop applications
Supports
S pports native
nati e functionality
f nctionalit
Gesture control, signature capture, and so forth
E-mail, phone, and location integration
Adjusts page for landscape and portrait orientation
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi Touch to e-mail the contact
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
JavaScript Files for Siebel Mobile Applications

Siebel Open UI uses the same JavaScript files to support both
mobile and desktop devices
Provides a consistent look-and-feel for all applications
Differences are implemented using Siebel Web Template files
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
All
tuapplications use
y@ sphyrenderer.js
S
e
as the default
d
iform applet physical
n
h
t
a
renderer
p use
c
k to
n
a
ay ense
m
(
y e lic
e
d
n rabl
a
k P nsfe
This is a
asnof IP2014
y
ra
Ma non-t
CSS Files for Siebel Mobile Applications

Siebel Open UI uses CSS classes specifically written to style
mobile HTML pages
Look for classes with the words "mobile" or "touch" in them
A section of theme-aurora.css specifying

display options for touch devices
s
a
h
Styling for mobile applications
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Enabling an Application Object Manager for Siebel

pp
Mobile Applications
If necessary, run the new_compdef_sia script for your Siebel
server to add the mobile AOMs to it
Also adds virtual directories for new AOMs to the Siebel Web
Server
Only necessary for migrations; not used for new installations
Configure the application object manager as you would for

Siebel Open UI by setting the server parameters:
a
s
a
)h
m
co de
In
I addition
ddi i set MobileApplication
M bil A li i = TRUE
e
r
u Gui
t
n
Optionally, set the SupportedMobileBrowser
t parameter
ce server
n
c
e
a
to specify additional mobile devices
@to support
tud
y
S
e
d this
The default value lists the currently-supported
mobile devices
n
a
p
e
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
For details
on
n new_compdef_sia or setting additional parameters, consult "Setting Up
a trunning
a
y
r
a
Siebel
n- Connected Applications" in Siebel Mobile Guide: Connected. In addition consult
M nMobile
o1511445.1
document
on My Oracle Support.: Setup steps for Siebel Connected Mobile
HighInteractivity = TRUE
EnableOpenUI = TRUE
Applications - Object Managers and Virtual Directories (Doc ID 1511445.1).

The more-detailed steps are:
Use new_compdef_sia to create the definitions of the mobile AOMs
Enable the appropriate mobile AOMs on the server
- They are in the "Handheld Sync" component group
Set the mobile AOM parameters. In addition to those shown above, set:
- AppletSelectStyle = "Applet Select"
- EnableInlineForList = Never
- ShowWriteRecord = True
- EnableSIFocusTracking = True
Configure virtual directories on the Siebel Web Server to allow users to access the
mobile AOMs
Architecture of Siebel Mobile Applications

Siebel mobile applications must be configured specifically for
mobile devices:
Are configured using Siebel Tools
Use mobile-tailored versions of several repository objects:
Applets
A
l t
Applet Web Templates
Views
View Web Templates
Screens
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
More
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Mobile Applets
Siebel mobile applications include mobile applets tailored for
mobile devices
Include fewer fields or columns to allow for better display on
mobile devices
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
You can
copy
applet
n used in a desktop application and it usually will display correctly if the
a tan
a
y
r
a
- have a large number of fields.
applet
not
M does
non
"Mobile Pharma Account Form Applet Default"
applet displayed in preview mode in Siebel Tools
Mobile Applet Web Templates

Mobile applets reference mobile applet web templates that are
specifically configured for mobile devices
Fewer fields per applet
Less padding and spacing
Siebel
Si b l Open
O
UI formatting
f
tti
For example, <div> tags instead of explicit placements
a
s
a
)h
m
co de
e
r
u Gui
t
"Mobile Pharma Account Form Applet
n
ce ent
Default" uses mobile applet webc
templates
a
@ Stud
y
e
d this
n
a
cp use
k
n e to
a
y
a ens
m
(
y e lic
e
d
n rabl
a
febased on standard applet web templates and usually display correctly
k Pcannbe
s
n
Mobile a
applets
tra
ay as nthey
as
do not have too many fields.
Mlong
no
Mobile Views
Are configured to contain the mobile applets for Siebel mobile
applications
Are based on mobile view web templates
Include mobile applets
The Pharma Account

List View - Mobile view...
s
a
h
)
m
...is based on the View
Detail
Map
o
c (aeSiebel
e
Mobile view web
template d
r
i
tu webGtemplate)...
u
Open UInmobile
e
t
cc den
a
y@ s Stu
e
d
n mobile
thi applets
aincludes
...and
p
e
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Mobile View Web Templates

Are Siebel view web templates specifically configured to
support mobile views
Fewer applets per view
Siebel Open UI formatting
For example,
example <div> tags instead of explicit placements
CCViewDetailMap_Mobile.swt: The view
web template for a mobile view
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Mobile Screens
Are configured to include the mobile views for a Siebel mobile
application
Typically include only a small number of views
The ePharma Account Mobile screen includes

the Pharma Account List View - Mobile
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Customizing the User Interface for Siebel Mobile

pp
Applications
The user interface for an as-delivered Siebel Mobile
application is customized in the same way as desktop Siebel
applications
Write the custom JavaScript code for the presentation model or
the renderer
Third-party mobile libraries such as JQuery provide a large

selection of prebuilt customizations
Copy the files into the custom directory
s
a
h
)
m
Modify the styling rules in the CSS files
o
c de
e
r
Use a desktop browser to inspect the UI elements
u Gui
t
n
Edit the corresponding rules
cce dent
a
Save the edited rules in a new CSS
y@files Stu
e
d
Administer the CSS files, adding
thito the theme
an ethem
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Siebel Disconnected Mobile Applications

Are Siebel applications that run without requiring a Siebel
Server, or even a network connection
Run in a standard web browser
You do not need to install an application on your device
Have the same look-and-feel as connected mobile

applications
a
s
a
)h
m
co de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
k P nsfeMobile Applications versus Siebel Remote: Siebel's other
n
Siebel a
Disconnected
ra is "Siebel Remote". Siebel Remote is installed as an application on
ay n-tsolution
disconnected
M
no Windows machine, runs as a local application, and stores its data in a local
your Microsoft
Disconnected mobile
applications look just
like mobile applications
Include a "Go offline"

button to enter/exit
disconnected mode
database. Siebel Disconnected Mobile is not OS-specific, and does not require the installation
of an additional application. In addition, Siebel Remote is planned to be end-of-lifed in the
future in favor of Siebel Disconnected Mobile Applications.
Siebel Disconnected Architecture

On entering disconnected mode, the application runs a script
that caches application data:
JavaScript and CSS files in the standard browser cache
Application data is stored in the HTML5 data store
Siebel Web Server
Client Browser
a
s
a
)h
Siebel
m
Database
co de
e
r
i
u Data
HTML5
t
u
n
G
t
n
cce Store
e
a
@ Stud
y
e
and
d 1. Download
is todata
n
h
t
a
metadata
client
Continued
cp use
Siebel k
Server
n
o
ya nse t
a
(m lice
y
e
nd rable
a
fe standards-compliant browsers have a data store dedicated to
kP
s
n
HTML5adata
store:
Modern
n
traThis data store is limited in size; therefore, only a specified subset of
ay content.
HTML5
n
M
no data is downloaded to the store. Details on configuring a user and the data that is
application
Browser Cache
downloaded are on subsequent slides.

On subsequent attempts to access the application's URL, the
browser reads from the cache and data store
No network connection is required
Data can be created, edited, updated, and removed
Siebel Web Server
No network
connection
Client Browser
Browser Cache
s
a
h
) data
Siebel
2. Work
with
m
o
and
Database
in
c metadata
e
e
r
d
client
i
HTML5
tu Data
u
n
G
e
t
n
cc Store
e
a
d
y@ s Stu
e
d
an e thi
p
Continued
s
Siebel Serverkc
u
n
o
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
The JavaScript
an are stored in the browser cache.
ya -trfiles
a
M non

On leaving disconnected mode, the application connects to a
Siebel Server and synchronizes the data
A network connection and a properly-configured Siebel Server
is required
Siebel Web Server
Client Browser
Browser Cache
s
a
h
)
Siebel
m
o
Database
c de
e
r
i
u Data
HTML5
t
u
n
G
t
n
cce Store
e
a
@ Stud
y
3. Synchronize
e
d modified
isdata and
n
h
t
a
p
e
Siebel k
Server
c o usmetadata with servers
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Lesson Highlights
Siebel mobile applications use the same Siebel Open UI
framework as the regular desktop application
Use mobile versions of web template files
Disconnected mobile applications:

Have an identical look-and-feel to connected mobile
applications
Use same JavaScript, CSS files, and so forth
Store application data in the HTML5 data cache

Store metadata in the browser cache
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
Practice
Explore a mobile application
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non
s
a
h
)
m
o
c de
e
r
u Gui
t
n
cce dent
a
y@ s Stu
e
d
an e thi
p
c o us
k
n
ya nse t
a
(m lice
y
e
nd rable
a
P sfe
k
n
ya -tran
a
M non

D80347GC21 SG

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

D80347GC21 SG

Hochgeladen von

Copyright:

Verfügbare Formate

Unauthorized reproduction or distribution prohibited Copyright 2015, Oracle and/or its affiliates

Siebel Open UI Foundations

Learn more from Oracle University at oracle.com/education/

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Customer Experience (CX)

2 Introducing Siebel Open UI kc

Siebel Open UI Architecture

Administering the Manifest

Use the Manifest Administration View to Specify What Files Should be

Complete Example: Page 3 of 3 5-24

Cascading Style Sheets and Open UI Themes

Siebel Mobile Applications

Mobile Applet Web Templates 9-13

This lesson provides an introduction to the:

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Siebel Open UI - Foundations 1 - 2

Instructor and Class Participants

Who are you?

What is your prior experience?

Siebel Open UI - Foundations 1 - 3

Training Site Information

Class duration and breaks

Meals and refreshments

Siebel Open UI - Foundations 1 - 4

Siebel Open UI - Foundations 1 - 5

Familiarity with navigating Siebel CRM applications

Siebel Open UI - Foundations 1 - 6

Siebel Open UI - Foundations 1 - 7

Siebel Open UI - Foundations 1 - 8

Subject matter is delivered through:

Lecture and slide presentations

Siebel Open UI - Foundations 1 - 9

Siebel Open UI - Foundations 1 - 10

Specific guides for this course:

Fundamentals for Siebel Open UI

Siebel Open UI - Foundations 1 - 11

Oracle Learning Library

Siebel Open UI - Foundations 1 - <#>

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Siebel Open UI - Foundations 1 - 13

Siebel Open UI - Foundations 1 - 14

Siebel Open UI - Foundations 2 - 2

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

example, Siebel Self Service Portal.

Siebel Open UI - Foundations 2 - 3

Uses open standards to render the application

Downloaded to the client as needed to render the page/view

Does not use ActiveX

Runs on any standards-compliant platform

Copyright 2015, Oracle and/or its affiliates. All rights reserved.

Siebel Open UI - Foundations 2 - 4

Siebel Open UI Benefits

Native browser support

Siebel Open UI - Foundations 2 - 5

Native Browser Support

The Siebel page renders in any standards-compliant browser

Takes advantage of browser functions

Siebel Open UI - Foundations 2 - 6

Mobile Device Support

Siebel Open UI - Foundations 2 - 7

Siebel Open UI - Foundations 2 - 8

Enhanced User Experience