04 January 2013

APEX: Highlight a Record in Report - with Dynamic Action

Yesterday I wrote a blog on how you can highlight a record in a report.
That blogpost can be found here.
Learco Brizzi posted a comment on a different way of accomplishing the same thing. And there are probably a number of other possibilities to implement the same requirement.
In this blogpost I want to show you how to do the same with a Dynamic Action. Why would you want to choose for a Dynamic Action? This is a more efficient way because you don't need to refresh the page or the region. This blogpost will use a report based on the EMP table, located on page 11. Only the edit-image will be clickable in this example.

Step 1: Add Link Attributes

The Dynamic Action needs to be triggered by something, in this case I will add a CSS-class for this. The CSS-class is named "clickme". I also added an ID attribute, although not really necessary for this example, which might be useful for later development. Most likely you will want to take some action based on the liked record.
The target page is not relevant, so I placed a hashtag (#) there.

Step 2: Add Dynamic Action

Create a Dynamic Action named "highlight clicked record".
The Dynamic Action will need to be triggered when the element with the class "clickme" is clicked. Using jQuery this is easy to accomplish.
Just catching this event is not enough, you need to do something. For the TRUE action (that is: the element with the class "clickme" is clicked) specify that you will Execute Javascript.
$('.highlight-employee').removeClass ('highlight-employee');
$(this.triggeringElement).parent().parent().children().addClass ('highlight-employee');
The first line of jQuery code will remove the class "highlight-employee" from all elements that have the class "highlight-employee".
The second line will add the class "highlight-employee" to all elements in the row that was clicked upon.
If you don't include the first line jQuery code, the highlighted record will stay highlighted even if you click other records.

Step 3: Add CSS

Add some CSS styling in the HTML Header (at page level)
.highlight-employee
   {
     background-color: blue !important;
     color: white;
   }
Demo page

3 comments:

  1. Greate sample. Do you think that it is possible to use some similar to change the backgroud color of cell?

    ReplyDelete
  2. The trick with the hash-tag does not stop the natural action of ' clicking'; since there is no page mentioned, APEX will show the default page and the highlighting can't be seen any longer.
    I took the liberty of decomposing your test-site and I saw you added a second 'true'-action : this was the CANCEL-event.
    This second true-action let the whole thing work.

    ReplyDelete
    Replies
    1. Yes, you're absolutely correct. There is an additional "True Action" which cancels the default behaviour of the link. Actually it's the third "True Action", the second is the alert that is shown :)

      Delete