White

Paper

Exploring Siebel Open UI

Abstract
In the modern era, to cater the need for broad support of clients and
devices, an improved user interface is a must. As CRM provides
automation of business process across clients with the help of
customizations, UI customization also plays a major role. Oracle has
provided a new standards based open client for Siebel. The Siebel Open
UI is an open architecture that can be used to customize the user
interface of enterprise applications. It has standards to render the
Siebel Open UI client in the Web browser and uses no proprietary
technologies, such as browser plug-ins or ActiveX.

This paper explores the capabilities within the Open UI world, the
benefits and caveats of Open UI and the need for implementing Open
UI in projects. This paper also addresses some issues with open UI and
work around for the issues that one can adopt during Open UI
implementation.

Keywords Description
Open UI Siebel Open User Interface
HI Siebel High Interactivity User
Interface
IE Internet Explorer
UI User Interface
CSS Cascading Style Sheets
HTML Hypertext Markup Language
JS Java Script

1
 Exploring Siebel
Open UI

2
 Exploring Siebel
Open UI

Table of Content

Need for Siebel –Open UI.........................................................................................4

3
 Exploring Siebel
Open UI

Features of Siebel Open UI.......................................................................................4

Limitations of Siebel Open UI..................................................................................4
Implementation-Case Study......................................................................................5
Show sub applets as images..................................................................................5
Change the image icon based on record availability and bubble effect................6
Tooltip and Resizing for text area.........................................................................6
Issues with Open UI with workarounds....................................................................7
Scroll bar issue in list applet text area..................................................................7
Check box is not indicating read only behavior....................................................7
Popup inside another popup is not working..........................................................8
Pick list in MVG applet is not coming up immediately........................................8
Extra scrollbar for applets when accessing through IE.........................................8
Conclusion................................................................................................................9
Reference Material....................................................................................................9

Need for Siebel –Open UI

Large enterprises have numerous applications and users access them

through different application user interface logins/Links. This requires
business users to logon in each application separately which makes
them authenticate themselves to each of the application with separate
user logins. In real time the individual links are accessible in a portal
with a single sign-on. When Siebel application is embedded in this
portal, they should match with the look, feel and behavior of the portal
in which all the other applications are hosted. HI-Siebel cannot leverage
the customization in the presentation/UI level extensively to match with

4
 Exploring Siebel
Open UI

the different requirements of UI Design. Siebel Open UI helps to

customize the application through presentation model and by using
physical render files, CSS, HTML and JavaScript. Also to remain
competitive in today's world Open UI supports cross browser and
mobile device compatibility.
The adoption of Siebel Open UI has some difficult nuances which have
to be dealt with. The following section in this document provides the
few customizations using Siebel Open UI and workaround for the issues.

Features of Siebel Open UI

First, we shall see the advantages of Open UI.

 Many of us do not like to see only the blue screen for years and
years. Here with Open UI you can customize the application
behavior as you like.
 Look and feel of the application would be great.
 Cross browser compatibility.
 Entrench Siebel in external application and vice versa.
 Partial refresh functionality.
 Transform list applet display by means of grid and carousel.
 Google map accommodation.
 Adjust the controls alignment dynamically and also hide and
show the controls by using Java script.
 Can access through mobile and tablets.
 Tab and Tree layouts.
 Customization with the help of third party plug-in.

Limitations of Siebel Open UI

Even though the Siebel Open UI has many advantages, we should also
consider the limitations that we had observed in the recent times.
 Few of the functionalities do not work well in IE.
 Column display is not available.
 Read only display of check box is not available

Implementation-Case Study

The enterprise applications which entail the change in user interface

can consider Open UI for their customization. Considering the features
and limitations of Open UI as depicted before, a case study was
performed to ensure that few of the features of Open UI are feasible
and portray some of the implementation issues that one can
experience.

5
 Exploring Siebel
Open UI

This section provides the below sample implementations.

 Show sub applets as images in the same parent applet.

 Change the image icon based on record availability and bubble
effect on mouse over.
 Tooltip and resizing for text area.
 Expand and collapse menu bar on need basis.

Show sub applets as images

The normal Siebel application has an applet as parent and child applets
related to that will be displayed as sub applets. Here, we had displayed
the sub applets as images by using Open UI related methods, Java
script, CSS and also by modification in web templates. The space that
has been used by sub applets will be available now and it can be used
for some other purpose.

Change the image icon based on record availability and bubble

effect

In Open UI, the sub applets are implemented as images in order to get
all the required functionality in the same screen. The user can click on

6
 Exploring Siebel
Open UI

the image in order to create a new record or view the existing records.
Further there might be a need to change the look and feel of the image
for a particular scenario, for e.g., the user would see a change in the
image when there is a record in the child applet. On seeing the image,
the user would be able to know whether the applet already has a record
or not. The bubble effect to the images is provided when the user
mouse hover on the image.

The above UI changes are achieved using CSS, Java script and HTML.

Tooltip and Resizing for text area

Other useful features of Open UI are resizable, drag and tool tip for the
text areas. In a normal text area field, the user has to scroll up or down
in order to write a description or to view the whole description. Now
with Open UI customization, the user can resize or drag the text area.
We had implemented the tool tip feature for the description field, so
that the user can read the whole text without scrolling. On mouse hover
the whole text will be visible as a tool tip.
The above changes are achieved using Java Script or by using a third
party plug-in.

7
 Exploring Siebel
Open UI

Issues with Open UI with workarounds

Some of the issues that have been observed with Open UI during the
implementation phase and the solution approach/workarounds used to
address the issues are listed below.

 Scroll bar issue in list applet text area.

 Check box is not indicating read only behavior.
 Extra scrollbar for applets when accessing through IE.
 Popup inside another popup is not working.
 Pick list in MVG applet is not popping up immediately.

Scroll bar issue in list applet text area

There is a vertical scroll bar appearing in the middle of all the pop up
list applets for text area field in IE. This is happening only for the list
applet and not in form applet text area. Since the issue is not
happening for a particular applet, the best possible solution is to use
the CSS modification. Hence the issue can be fixed across all the
applets.
We have fixed this issue by doing modification in the theme-base CSS
file. In order to fix this, provide the width as 100 % for the class
corresponding to the list text area.

Check box is not indicating read only behavior

In general, a read only field will be displayed as a grey field and should
not be editable.

8
 Exploring Siebel
Open UI

But the checkbox did not exhibit the read only behavior and there is no
difference between normal and read only fields.
The read only has shown as outer border in IE and there is no difference
between normal and read only fields in Chrome, Mozilla and other
browsers.
By making the disabled attribute property of the check box to true
would be the solution using CSS. Another option would be, replace the
image with another image during preload using JS file.

Popup inside another popup is not working

Popup inside another popup is not working in IE but its working fine in
Chrome and Firefox for Siebel open UI. For example, we have a pick
applet as popup and inside the pick applet there is another popup on
click of a button. As this scenario would not work in IE, the below
workaround can be adopted in the client browser settings.
 Go to ‘Tools’ ’Internet options’.
 Under ‘General’ tab, click the ‘Settings’ button in the ‘Browsing
History’ section.
 Choose the radio button “Every time I visit the webpage”.
 Click ‘OK’ and restart the IE.

The other option would be a JS file for the applet cache issue.

Pick list in MVG applet is not coming up immediately

When a user creates New Record in MVG applet, the pick list value does
not pop up immediately in list applets. The user has to click more than
once to select the desired value from the drop down.
As a workaround,
 We can change the web template mode to edit only for creation
of New Record. The issue is happening for the pick lists in list
applet. So by changing the web template mode for the creation
of New Record would solve the issue.
 If you don’t want to change the New Record creation mode to
edit then by writing JS file for the respective applet would be the
workaround.

Extra scrollbar for applets when accessing through IE

We also noticed that there is an extra scroll bar in the applets when we are accessing the
application through IE. It can be fixed by adding the CSS property of overflow to hidden
along with the JS file.

9
 Exploring Siebel
Open UI

Conclusion

Siebel has proven to have a combination of transactional, analytical

and engagement features to manage all customer-facing
operations.However, we know that Innovative and interesting UI design
for enterprise applications is the need of the hour. We have seen in this
paper that Siebel Open UI helps the organizations to rethink on how
one can migrate to a customer centric, customized User Interface. The
Open UI has lot of features and advantages that might amaze the user,
if they used the old age Siebel application for a while. As with any new
technology, Siebel Open UI has a long way to go in terms of
implementation of numerous best practices and in definition of
standards. This analysis and case study with solution approach for the
issues would certainly help Siebel architects to explore more on this
emerging technology, to set bench marks during implementations and
be the starting point of great user interface designs for Siebel
implementations.

10
 Exploring Siebel
Open UI

11