03 January 2013

APEX: Highlight a Record in Report

Yesterday I read a question which was posted as a reply to an earlier blogpost. The orginal blogpost was about how to make a Report Row clickable, instead of just the Edit column.
The question was: "How do I keep the clicked row highlighted so I can keep it as context information?"
To see a working example of the requirement, check out this sample page
In this blogpost I will provide a step-by-step way of doing just that.
For this to work properly, you will need a page with a report. In this blogpost page 9 will contain a report based on the EMP table.

Step 1: Hidden Item

Create a hidden item to keep the value upon which was clicked.

Step 2: Set the Value

Navigate to the link column and set the value of the clicked row in the hidden item.
The link column navigates back to the same page, the alias of the page is EMP09.

Step 3: Add jQuery

Add the following jQuery code to the "Execute when Page Loads" section at page level
$(function(){
   clicked_empno = $("#P9_EMPNO").val();
   $('a[href$="P9_EMPNO:'+clicked_empno+'"]').parent().parent().children().addClass('highlight-employee') ;
});
The anonymous function is executed when the page is loaded. It will retrieve the value that is stored in the hidden item (P9_EMPNO) and places it in a local variable (clicked_empno). Next that value is concatenated in the jQuery selector to determine which row to highlight.
All the elements in the row get the CSS class added to it.

Step 4: Add CSS

.highlight-employee
   {
    background-color: blue !important;
    color: white;
   }
And that's all there is to it.

3 comments:

  1. Hi Alex,

    Nice post. I did something similar for an interactive report: http://learco-brizzi.blogspot.nl/2011/02/highlight-current-record-in-interactive.html

    Learco

    ReplyDelete
  2. Alex, thanks a lot! It looks like a magic, but it works!

    I'm novice, so going crazy about a numerous approaches. Would You comment for dummies, why don't use documented in APEX, apex.item, or $x objects instead? What is the differences and what i should use for best practice?

    Appreciate You!

    ReplyDelete
  3. Hi, thanks.

    Can u point us to the steps of highlighting a row without having to submit or redirect the page? My app only refreshes the page but not redirect or submit. I can see you have a demo in your sample app (Highlight 2) as well where u have a javascript that alerts one of the id of the edit link clicked.

    ReplyDelete