Siebel Open UI Vertical Scrollbar

Siebel Open UI vertical scrollbar in List Applets

In Open UI, the traditional vertical scroll bar is replaced by horizontal play bar buttons. These buttons perform the same functionality as that of vertical scroll bar in HI applications. But a lot of people are not liking this feature as compare to HI mode. This might confuse the users with horizontal scroll bar which is used to see columns to the right of the table. 

Oracle has used JQGrid model to render the OUI list applets. The horizontal play bar is a feature of JQGrid plugin. This makes it different from HI mode applets in many ways. I have discussed the differences and comparisons of these two type of applets in another post. It is not technically correct to have JavaScript scroll bar.

Here , I have tried to make this horizontal play bar align vertically. For this purpose I have written custom PR to render the existing play bar to rotate vertically and place it next to the list.

Here is how it looks. 

The PR contains the following code in ShowUI method.

     var currwidth = $(".ui-jqgrid-bdiv").width(); // get current width of list table
var tabwidth = currwidth - 40; // 
$(".ui-jqgrid-bdiv").css("width",tabwidth); // leave 40 pixel space for scroll bar
$(".ui-jqgrid-bdiv").css("float","left"); // set the table to left
var html = $(".ui-pager-control").html(); // get the horizontal play bar html - this is not required
$('.ui-pager-control').appendTo('.ui-jqgrid-view'); // remove the play bar and move it next to list
$(".ui-pager-control").css("float","left"); // make it float to left
$(".ui-pager-control").css("width","40"); // place it in 40 pixel room we created
$(".ui-pager-control").css("-ms-transform","rotate(90deg)"); // rotate the horiontal scroll bar by 90 deg. to align vertically..for IE browser
$(".ui-pager-control").css("-webkit-transform","rotate(90deg)"); // same as above.. for chrome,opere,safari browsers

$("span.ui-separator").parent().css("width","45"); // set the separator width to fit the list table height

This actually is just moving the existing play bar to right of the list and rotating the play bar. The PR file can be viewed here. 

Note: This is just a sample code and only written in Show UI method. The same should be taken care in other events like browser restore/resize. The same code should be replicated wherever necessary.

Check out the full code at below link. This is for educational purpose only.
Part-2

Also check this out for creating a scrollbar that looks and works similar to a browser scrollbar. 

Open UI and HI list applets vertical scrolling

If you had chance to work on Open UI, you would have observed a lot of difference in UI level objects like MVG, Query Assistant buttons, list applets etc when compared to HI mode. Well, since the base technology in rendering the UI is changed, the changes are required for technical reasons. One such feature is vertical scroll bar being replaced by horizontal play bar. Let us see why this change is probably made. 

Consider vertical scrolling using normal javascript for a table. We can have a vertical scroll bar in a list applet like this. But for the js scroll to work, the table html should have all the table rows (tr) and columns (td) tags and values which should show when we scroll.

So if I have 100 records with 10 fields each, I should have 1100 html tags (100 rows, 1000 columns). This will make my HTML very big. But the actual problem is, we need to get the field values of 100 records and place them into 1000 columns. You know, 1000 GetFieldValue() functions need to get executed. Consider the joins, MVGs and links, the performance will kill your browser. This rules out the JavaScript scroll bar.

Actually, this is the reason why even in HI mode, we have GotoNextSet, GotoPreviousSet, GotoNext, GotoPrevious methods in vertical scroll bar. These are the same methods we have in Open UI list applets also. So, we query a set of records (generally 10) and place them in UI. If user wants to get more records, user has to click on scroll buttons. 

But the visual difference we observe is the slider is missing in Open UI.

Open UI used JQGrid plugin which is a JQuery based plug-in which has built in methods to access/set/modify the Grid/table elements in the HTML. The horizontal play bar is a feature of JQGrid. So, Oracle used it in Open UI. JQGrid is currently used by many web based technologies. 

The horizontal play bar can be aligned vertically and made to look like vertical scroll bar except without slider. I am going to post the script required to make this change. If we can add a slider to this and make it work, then we can have the same vertical scroll bar as in HI mode. 

Please leave a comment about your thoughts on this.

Siebel High Interactivity Framework vs Open UI Framework

Siebel High Interactivity Framework

If you are browsing YouTube in any browser, it needs an add-on or plug-in to run the video. The browser does not have capability to play the video all by itself (although, latest HTLM5 enabled browsers have this capacity). It requires an add-on or plug-in. Similarly, for a Siebel application UI to work, it requires additional add-ons.

Before Open UI framework is introduced, Siebel High Interactivity application can only be opened in IE browser. The Siebel application is rendered using Internet Explorer's ActiveX Controls. The application requires the ActiveX controls for proper rendering and functionality of UI.

ActiveX objects are programs (add-ons) that supplements and enhance the browser experience. The ActiveX objects for Siebel are included as part of the installation and are placed in SWSE/public/enu/23030/applets location. (This location varies based on version; 23030 is for 8.1.1.11) Below is the location of ActiveX objects in local web client.

 When you access the application, the browser will prompt for the download of ActiveX and if user allows the prompt, it downloads ActiveX from your SWSE folder location. These ActiveX controls are installed in your IE. This is how Siebel High Interactivity Framework works. This can be viewed from Internet Settings -> Manage Add-ons

Users can not open HI application in any other browsers. Moreover, for ActiveX controls to download and work, user has to change internet settings which have a risk of decreasing the browser security. ActiveX objects are more prone to security risk as they are installed in your local computer and can access your computer.

Open UI framework:

Open UI is a framework for customising User Interface of Siebel. This uses Javascript, JQuery, CSS etc to render the Siebel application and function as per the requirements. Just like ActiveX, JQuery is a JavaScript based plug-in. There are other extended plug-ins to JQuery like JQuery-UI which are used in Siebel Open UI framework.

Why Open UI?

There are many reasons why Open UI framework is built when there is an already working, tested High Interactivity framework available.

Unlike before, the number of browsers and operating systems has increased beyond IE and Microsoft windows. Forcing the users to keep using IE and using only windows environment is not a good idea. It is not easy to recreate add-ons for other browsers and test them. Windows 8 does not support ActiveX anymore. Check this link. This seems to be the death blow for HI framework.

What Open UI offers?

Here are the few advantages in Open UI compared to HI ActiveX framework.

1.   Support to all browsers. Earlier Siebel application can only be opened in IE browser. This is due to the dependency on ActiveX controls. Open UI framework is based on Javascript, JQuery, CSS which is supported in all browsers.   

2. Siebel Application in Mobile. Access Siebel application from any device.

3.   Custom user experience. Provides capabilities to UI customisations which HI framework does not provide. 

4. Working offline.