Friday, June 05, 2009

Highlight Row in Interactive Report

Recently I encountered a question on the OTN Forum about "How to Highlight a Current Row in an Interactive Report". For a regular report that kind of highlighting is a built-in functionality in the template, but an IR doesn't have a (editable) template (could be a nice enhancement for a future version though!). But you can override the styles used by an IR, by adding some STYLE tags in the Page HTML Header. First take a look at the on-line demo. You can click the [Edit] button to see the highlighting in action.

So how do we achieve that:
First we need to add a function call to the [Edit] link/button in the IR: Add "onclick=highLight(this);" to the Link Attributes property of the Link Column. This click calls a "highLight" function, defined in the Page HTML Header:

function highLight( pThis ){
$('td').removeClass('current');
$(pThis).parent().parent().children().addClass('current') ;
var empno = $(pThis).parent().next().html();
$s('P36_CUR_EMP', empno);
refreshReport( empno, 'P36_CUR_EMP' );
}
The "refreshReport" is a wrapper for some (standard) APEX functions to execute a Partial Page Refresh of the detail region on the right side of the page. The rest of the code is some jQuery stuff, first do a clean up to remove all "current" classes from the TD-tags - to "un-highlight" a previous selection - and subsequently add that class to all TD's in the current TR.

Next define a "current" style to your own taste. In this example I used:

.current
{
background : transparent url(#WORKSPACE_IMAGES#row-over.gif) repeat-x scroll 0 0 !important;
border-bottom : 1px solid red !important;
border-top : 1px solid red !important;
}
I also tweaked the standard "apexir_WORKSHEET_DATA" styles a bit to get a hover effect:

.apexir_WORKSHEET_DATA tr:hover {
background:#EFEFEF url(#WORKSPACE_IMAGES#row-over.gif) repeat-x scroll left top;
}
- and did some other restyling on the look-and-feel as well - but that's about it!
Post a Comment