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.