7/30/2019 Module 24 UI Layer Configuration Web Templates
1/28
UI Layer Configuration: Web Templates 1 of 28
Siebel 8.0 Essentials
7/30/2019 Module 24 UI Layer Configuration Web Templates
2/28
Module 23: UI Layer Configuration: Web Templates
7/30/2019 Module 24 UI Layer Configuration Web Templates
3/28
UI Layer Configuration: Web Templates 3 of 28
Module Objectives
To understand the role of Siebel Web Template files and Siebel tags
in the template files
To list the various types of templates
To describe how to register, associate and bind a template file
7/30/2019 Module 24 UI Layer Configuration Web Templates
4/28
UI Layer Configuration: Web Templates 4 of 28
Tailoring the Physical User Interface (UI)
The physical UI is tailored by editing template files and cascading
style sheets.
Use HTML or
text editor tomodify
layouts
Use a text
editor tocustomize
7/30/2019 Module 24 UI Layer Configuration Web Templates
5/28
UI Layer Configuration: Web Templates 5 of 28
Siebel Web Template Files
Siebel Web Template Files are HTML files with Siebel tags thatspecify how to render the Siebel application web page in the users
browser.
They specify the layout and formatting of:
Graphics and text elements.User data.
Standard
HTML tags
Siebel
tag
7/30/2019 Module 24 UI Layer Configuration Web Templates
6/28
UI Layer Configuration: Web Templates 6 of 28
Siebel Web Template Files
They are located in the WEBTEMPL directory in a Siebel installation
The files have a .swt extension They are edited using a text or an HTML editor
Can include other template files via swe:include tag
They reference Cascading Style Sheet (.css) files
Siebel tag toinclude
another Siebel
template file
7/30/2019 Module 24 UI Layer Configuration Web Templates
7/28UI Layer Configuration: Web Templates 7 of 28
Siebel Tags
These are special tags inserted into the web template files
Specify how objects defined in the Siebel Repository should be laid out andformatted for display in the users browser
Iterate to control layout repetitively
They serve as placeholders for Siebel-specific content
Siebel
tag for
iteration
Siebel tag
to insert
link
7/30/2019 Module 24 UI Layer Configuration Web Templates
8/28UI Layer Configuration: Web Templates 8 of 28
Cascading Style Sheets
Cascading Style Sheets are modified to define global parameters
Fonts, foreground and background colours, etc. They are located in PUBLIC\enu\FILES directory in a Siebel
installation
They are edited for achieving the desired look and feel
Backup the present .css files
Edit .css files with your preferred HTML editor
7/30/2019 Module 24 UI Layer Configuration Web Templates
9/28UI Layer Configuration: Web Templates 9 of 28
Web Template Object Definition
A layer of abstraction between a UI object definition (View, Applet, or
Web Page) and the file itself UI object definitions reference Web Template object definitions
References an HTML Web Template file
Changes are propagated to all
objects that reference the file
7/30/2019 Module 24 UI Layer Configuration Web Templates
10/28UI Layer Configuration: Web Templates 10 of 28
Web Template Placeholders
Web Template Placeholders contain placeholders for Siebel logical UI
definitions Definitions map to Siebel Web Templates
Placeholder
7/30/2019 Module 24 UI Layer Configuration Web Templates
11/28UI Layer Configuration: Web Templates 11 of 28
Web Template Explorer
Web Template Explorer is used
in tools to:Examine the contents of a
template file
Invoke an editor to modify the
template file
Identify other template files
included in a template file
It highlights Siebel tags for easy
viewing
Navigate to View > Windows >
Web Templates Window
swe tag
highlighted
Parent
template
Child
Template
7/30/2019 Module 24 UI Layer Configuration Web Templates
12/28
7/30/2019 Module 24 UI Layer Configuration Web Templates
13/28UI Layer Configuration: Web Templates 13 of 28
Form Applet Web Templates
They define the layout of form applets
Placeholder provides starting point for building appletSet template file parameters in Web Layout Editor in Siebel Tools
Web Layout
Editor
In the UI
7/30/2019 Module 24 UI Layer Configuration Web Templates
14/28UI Layer Configuration: Web Templates 14 of 28
List Applet Web Templates
They define the layout of list applets
Standard Interactivity list applets use Base and Edit modes
7/30/2019 Module 24 UI Layer Configuration Web Templates
15/28UI Layer Configuration: Web Templates 15 of 28
List Applet Web Templates
High Interactivity list applets use EditList mode
An editable
list of data
EditList mode
supports querying
and data entry
directly in the list
7/30/2019 Module 24 UI Layer Configuration Web Templates
16/28UI Layer Configuration: Web Templates 16 of 28
View Web Templates
These define the layout of a view
Common View Web Templates include:
7/30/2019 Module 24 UI Layer Configuration Web Templates
17/28UI Layer Configuration: Web Templates 17 of 28
Web Page Web Templates
They define the layout of Web Pages such as:
Login page
Error page
Container page
Login Web
Templatedefines layout
of login page
7/30/2019 Module 24 UI Layer Configuration Web Templates
18/28UI Layer Configuration: Web Templates 18 of 28
Using Template Files
Using template files requires three types of relationships:
Registering creates an object definition in the repositoryAssociating identifies the Web Template used to render an applet or view
Binding fastens a control to a specific position on the page or an applet toa view
7/30/2019 Module 24 UI Layer Configuration Web Templates
19/28UI Layer Configuration: Web Templates 19 of 28
Registering a Template File
Registering a template file:
Creates a Web Template object definition to define the logical name for the
templateCreates a Web Template File object definition to reference the actual
physical fileLogical name
in repository
for template
Type of webtemplateActual name
of the
physical
template file
7/30/2019 Module 24 UI Layer Configuration Web Templates
20/28
UI Layer Configuration: Web Templates 20 of 28
Associating an Applet with its Template
This process creates an Applet Web Template object definition to
specify the associated web templateDifferent applet modes can reference different web templates
Applet
modesApplet Web
Templates
used
7/30/2019 Module 24 UI Layer Configuration Web Templates
21/28
UI Layer Configuration: Web Templates 21 of 28
Associating a View with its Template
This process creates a View Web Template object definition to specify
the associated web templateEach view references a single view web template
Web Template
used to render
view
7/30/2019 Module 24 UI Layer Configuration Web Templates
22/28
UI Layer Configuration: Web Templates 22 of 28
Associating a Web Page with its Template
This process creates a Web Page object definition and sets the Web
Template property
Web Template
used to render
login page
7/30/2019 Module 24 UI Layer Configuration Web Templates
23/28
UI Layer Configuration: Web Templates 23 of 28
Binding
Binding maps the components of an applet or view to placeholders in
the corresponding template file Information is specified in the repository:
View Web Template Item
Applet Web Template Item
Web Page Item
Results in the corresponding element being displayed at runtime
7/30/2019 Module 24 UI Layer Configuration Web Templates
24/28
UI Layer Configuration: Web Templates 24 of 28
Applet Web Template Items
Applet Web Template Items are created by the binding process
Item identifier is the id attribute value in the swe:control tag This is used at runtime by the SWE to identify the controls making up
an applet
7/30/2019 Module 24 UI Layer Configuration Web Templates
25/28
UI Layer Configuration: Web Templates 25 of 28
View Web Template Items
View Web Template Items are created by the binding process
Item identifier is the id attribute value in the swe:applet tag
It is used at runtime by the SWE to identify the applets making up a view
7/30/2019 Module 24 UI Layer Configuration Web Templates
26/28
UI Layer Configuration: Web Templates 26 of 28
Web Page Items
Web Page Items identify the links and buttons appearing on a Siebel
Web page Item identifier is the id attribute value in the swe:pageitem tag
It is used at runtime by the SWE to position the links and buttons
7/30/2019 Module 24 UI Layer Configuration Web Templates
27/28
UI Layer Configuration: Web Templates 27 of 28
Module Highlights
Siebel Web Template Files are HTML files that specify how to render
UI for a Siebel application in the users browserCan reference css files
Can include other template files
The four Web Template types are Form Applet, List Applet, View and
Web Page
Template files require three types of relationships: Associating,Binding and Registering
7/30/2019 Module 24 UI Layer Configuration Web Templates
28/28
Lab
In the lab, you will:Examine Web Templates