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:
Next define a "current" style to your own taste. In this example I used:
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:
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.
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' );
}
Next define a "current" style to your own taste. In this example I used:
I also tweaked the standard "apexir_WORKSHEET_DATA" styles a bit to get a hover effect:
.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;
}
- and did some other restyling on the look-and-feel as well - but that's about it!
.apexir_WORKSHEET_DATA tr:hover {
background:#EFEFEF url(#WORKSPACE_IMAGES#row-over.gif) repeat-x scroll left top;
}
Comments
That's pretty cool!
I also like your use of the IR for navigation while showing the detail on the right. I hadn't thought of that.
Thanks for sharing,
Stew
That will change the style using that javascript function.
I have multiple regions in a page how will this function know which region to refresh ?
and when I try to produce what you said. I get :7777/pls/apex/f?p=102:9:401723411567861:::::#
and you application gets http://apex.oracle.com/pls/otn/f?p=41715:36:2560338678771080#
Do you know if im doing anything wrong ?
SELECT EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO
FROM EMP
WHERE EMPNO = :P36_CUR_EMP
AND :P36_CUR_EMP IS NOT NULL
UNION
SELECT TO_NUMBER(NULL)
, TO_CHAR(NULL)
, TO_CHAR(NULL)
, TO_NUMBER(NULL)
, TO_DATE(NULL)
, TO_NUMBER(NULL)
, TO_NUMBER(NULL)
, TO_NUMBER(NULL)
FROM DUAL
WHERE :P36_CUR_EMP IS NULL
The code for the refreshReport function is:
function refreshReport(pValue, pField)
{ // Refresh this region with the new pValue for the pField
// var region=$v('P0_REGION_ID');
var region='R3259408924885046712';
var link='f?p='+ $v('pFlowId') +':'+ $v('pFlowStepId')+':' + $v('pInstance')+ '::::'+ pField+':'+ pValue;
html_PPR_Report_Page( this, region, link );
}
There are more options, but you can add an inline STYLE on the page with <STYLE> and </STYLE> in the Page HTML Header.