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
Open UI
HI
IE
UI
CSS
HTML
JS

Description
Siebel Open User Interface
Siebel High Interactivity User
Interface
Internet Explorer
User Interface
Cascading Style Sheets
Hypertext Markup Language
Java Script

Exploring Siebel Open UI

Table of Content
2

Exploring Siebel Open UI

Need for Siebel Open UI ........................................................................................ 3

Features of Siebel Open UI ...................................................................................... 4
Limitations of Siebel Open UI.................................................................................. 4
Implementation-Case Study ..................................................................................... 4
Show sub applets as images .................................................................................. 5
Change the image icon based on record availability and bubble effect ............... 5
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 ................................................. Error! Bookmark not defined.

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

Exploring Siebel Open UI

applications are hosted. HI-Siebel cannot leverage the customization in the

presentation/UI level extensively to match with 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.

This section provides the below sample implementations.

Exploring Siebel Open UI

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 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

Exploring Siebel Open UI

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.

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.
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.

Exploring Siebel Open UI

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 dont 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.

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.