Monday, December 28, 2009

Scrolling Table :Table with horizontal Scrollbars and vertical scrollbars

Hi All,
I hope this is quite an interesting reading for most developers and they will try to put this feature in OAF tables.This is a very essential requirement in any of the custom OAF pages, where you show data in OATableBean and table has lot of columns, so, user has to scroll the entire page from scroll bar which is automatically rendered by browser if table width is more than page width.This is very painful for user as everytime, he scrolls the scroll-bar to see extra table columns,entire page is scrolled and he has to scroll back to the page to see other data.Similary, if you are displaying more than 10-20 rows in the table , user needs to scroll the entire page to see all the rendered rows of table.

In order to lessen the pain of the user and to have better UI design, we will render scroll bars both horizontal and vertical just surrounding the table
as , shown in the image below :


So, now lets focus how can we bring these scroll bars. In that case you can use the DIV tag to do the job for you.Put 2 RawText Bean(named DivStart, DivEnd), before and after the Table Bean in the JRAD page as shown in the image below IN JDEVELOPER:



You can use following API in process request :
public void processRequest(OAPageContext pageContext, OAWebBean webBean)
{
super.processRequest(pageContext, webBean);
//SEE ALL PARAMETER values you need to pass in the java comments of the method
addScrollBarsToTable(pageContext, webBean,"DivStart","DivEnd",true,"400",true,"400");
.
.
}


/**
* @param pageContext the current OA page context.
* @param webBean the web bean corresponding to the region.Pass the webBean of pagelayout.
* @param preRawTextBean is name of the Rawtext bean just above the table bean.
* @param postRawTextBean is name of the Rawtext bean just below the table bean.
* @param horizontal_scroll is boolean value if horizontal scrollbar is required/not required.
* @param width is the minimum width of table beyond which horizontal scrollbar is displayed.i.e
* if width is greater than this horizontal scrollbar is displayed.If this is passed as null, defalt value
* is considered which is 400.
* @param vertical_scroll is boolean value if vertical scrollbar is required/not required.
* @param height is the minimum height of table beyond which horizontal scrollbar is displayed .i.e
* if width is greater than this horizontal scrollbar is displayed.If this is passed as null, defalt value
* is considered which is 400.
*/
public void addScrollBarsToTable(OAPageContext pageContext,
OAWebBean webBean,
String preRawTextBean,
String postRawTextBean,
boolean horizontal_scroll, String width,
boolean vertical_scroll, String height)
{
String l_height = "400";
String l_width = "400";
pageContext.putMetaTag("toHeight",
"<style type=\"text/css\">.toHeight {height:24px; color:black;}</style>");

OARawTextBean startDIVTagRawBean =
(OARawTextBean) webBean.findChildRecursive(preRawTextBean);
if (startDIVTagRawBean == null)
{
throw new OAException("Not able to retrieve raw text bean just above the table bean. Please verify the id of pre raw text bean.");
}

OARawTextBean endDIVTagRawBean =
(OARawTextBean) webBean.findChildRecursive(postRawTextBean);
if (endDIVTagRawBean == null)
{
throw new OAException("Not able to retrieve raw text bean just below the table bean. Please verify the id of post raw text bean.");
}

if (!((height == null) || ("".equals(height))))
{
try
{
Integer.parseInt(height);
l_height = height;
}
catch (Exception e)
{
throw new OAException("Height should be an integer value.");
}
}


if (!((width == null) || ("".equals(width))))
{
try
{
Integer.parseInt(width);
l_width = width;
}
catch (Exception e)
{
throw new OAException("Width should be an integer value.");
}
}

String divtext = "";
if ((horizontal_scroll) && (vertical_scroll))
{
divtext =
"<DIV style='width:" + l_width + ";height:" + l_height + ";overflow:auto;padding-bottom:20px;border:0'>";
}
else if (horizontal_scroll)
{
divtext =
"<DIV style='width:" + l_width + ";overflow-x:auto;padding-bottom:20px;border:0'>";
}
else if (vertical_scroll)
{
divtext =
"<DIV style='height:" + l_height + ";overflow-y:auto;padding-bottom:20px;border:0'>";
}
else
{
throw new OAException("Both vertical and horizintal scrollbars are passed as false,hence, no scrollbars will be rendered.");
}
startDIVTagRawBean.setText(divtext);
endDIVTagRawBean.setText("</DIV>");
}
Please Note : Height and Width passed in addScrollBarsToTable API are the minimum
height and width of the table respectively which will be displayed on the page. Hence if this display resolution is available on page the scrollbars will not be displayed or corresponding one scrollbar or both scrollbars will be displayed.If you are not able see both scrollbars, even if you pass true for both in this method, try to put less resolution like 150 and 150 etc.

Happy coding..!

22 comments:

Kusa (Sasikanth) said...
This comment has been removed by the author.
Kusa (Sasikanth) said...

Hi Mukul,
Im working on Jdev 9.0.3.
And here there is a requirement to have scroll bar for a table.
In-fact that table is the result table of Query region(construction mode: autocustomized).
SO can u please throw some light on this.

Mukul Gupta said...

Did u tried the code given in this article for that?
--Mukul

Kusa (Sasikanth) said...

Hey Sorry for replying late..

Yeah i tried the code..
But im trying for a scrollbar to Results table of a query region.. that is causing the prob while incorporating your code.

kalis said...

To use this logic,
put your DIV outside the Query Region, and try.

Regards,
Kali.

kalis said...

Mukul,

For this table we can get vertical scrollbar also, but changing the
height:800;overflow-y

Thanks.

Regards,
Kali.

kalis said...

Mukul,

Forgot to add the sample code,

startDIVTagRawBean .setText("DIV style='width:800;height:600;overflow:auto;padding-bottom:20px;border:0'>");

This will give both vertical and horizontal scrollbar.

With Regards,
Kali.

Mukul Gupta said...

Thanks Kali, I have revised the article and made generialised method for everybody to utilise.
--Mukul

Unknown said...

Hi Mukul,

I am Rama Avanigadda from Fujitsu.

Thank you very much for your blog.

I could able to fulfill one of the requirement from our client with this post.

But I have one question.
Whether can we move the navigation link of the table from right side to left as due to scroll bar, those links to navigate to next set of records are not visible on page load. for that user needs to explicitly move the scroll bar.

Please suggest.
Thanks,
Rama Avanigadda.

kalis said...

Rama,

If my understanding is correct, you want to move the scrollbar programatically. If yes try the following javascript,
OARawTextBean javaScriptRawText =(OARawTextBean)webBean.findChildRecursive("JavaScriptRawText");
StringBuffer javaScriptString = new StringBuffer();

javaScriptString.append("");
javaScriptString.append("function scrollToBottom(){ window.scroll(0,900); }" );
javaScriptString.append(" scrollToBottom();" );
javaScriptString.append(" ");

Note: replace scipt with script.

With regards,
Kali.

Mukul Gupta said...

Rama,
To be frank, I could not get your exact requirement, drop me a mail on Fujitsu mail, I can reply accordingly, or just reply here itself with a little more details, on what exactly you are looking for?
--Mukul

udeshika said...

i am able to craete scrollbar for table but ,while scrolling headers of the table are lost while scrolling...is there anyways to keep the heders of table intact while scrolling.

udeshika said...

i am able to craete scrollbar for table but ,while scrolling headers of the table are lost while scrolling...is there anyways to keep the heders of table intact while scrolling.

Mukul Gupta said...

Hi udeshika,
Its not possible to keep headings intact in table bean without changing the table bean code,which is not the correct thing to do, like chnaging Oracle seeded code.

kalis said...

Udeshika,
You can try one workaround,
The table should be an Advanced table and remove the headers
and above the table create an Advanced table without any column.

But depending upon the table data the alignment might get change. But give it a try.

With regards,
Kali.
OSSI.

Felix Laventman said...
This comment has been removed by the author.
ANGSHUMAN said...

Hi Mukul,

Is it possible to add the scrollbar in seeded oaf page (Seeded oaf table).
If yes then how we can achieve this..??

Regards,
Angshuman

it balaji said...

Hi All,

Can any one help me how to add textbox (similar to Notes in Notification) with srollbox inside the table.

Unknown said...

hi sir i have used code and it is working perfectly fine but i am facing one problem that scroll bar is coming in extreme right of the screen ,but i want it to be right side of my advance table . please reply soon
thanks and regards
Anshul

Unknown said...

Hi, I have a requirement similar to this. I have two tables in which scroll bars should be enabled. But scrolling in one table should scroll the other table in unison.

Please provide any kind of support.

Appreciate!!

Unknown said...

Hi Mukul,

Can we have vertical scroll bar in RawText item??
We are setting the item text by a html code which has vertical scroll. But the same is not being displayed in OAF.

Appreciate your help.

harshu said...

Hi Mukul
I am not able to put scroll bar i had used your code but nothing is happening