An elegant method to highlight the currently selected row in a report.
Setup of the Interactive Report (see Code section below for more details for all report types shown here):
- For Target, use: Page in this Application.
- For Page, use: &APP_PAGE_ID.
- Open the Column Attributes page for the column that is used to select the record.
- In Column Link – Link Attributes, use: id="XXX#ID#", where XXX (e.g. EMP) is the alias of the identifying table, and ID (e.g. EMPNO) is the primary key of the table. In this example: id="EMP#EMPNO#'.
- In Column Link – Item 1, set the item that contains the id of the row to be highlighted. In this example, set P1047_EMPNO to #EMPNO#.
I have added an example for an IR of Type "Function Body returning SQL Query" as well, but now using a Link Column instead of adding the link column in the query itself.
Since Apex 19.2, the JQuery solution to highlight the entire row instead of just one cell doesn't work anymore for Interactive Reports. See notes below for details.
My new solution is to loop through all the cells of the row using javascript, and set them all individually. Not as elegant but more flexible, so not a total disaster.
In the Dynamic Action javascript I have included both the cell and row options, just remove whichever you don't need.
Getting this to work with Interactive Grid is a bit tricky (see comments below), and you probably don't want to mess around with it too much anyway. There's a bit too much javascript running in the background for my taste... So I have just added some CSS to the page to make it look like the other examples.
Notes
- Avoid using rowid for ID, since rowid can contains characters that are illegal in urls. If you really have to use rowid, convert it to something legal, e.g. using rawtohex(rowid).
- Make sure you use a template for the report region; do not use No Template, the dynamic action will not work if you do!
- The previous method used this line of JQuery to highlight the row: $('#EMP&P1047_EMPNO.').parent().parent().css('background-color','#FFBB44'); - to highlight only the cell, remove 1 parent()).
This still works for Classic Reports, but I thought it would be best to have a generic solution. The old method is still included (as a comment) in the Dynamic Action.
The 'background-color' and '!important' CSS settings used by Apex itself interfere with the Dynamic Action, causing some of the color changes to fail. The new solution described here works fine again, for all reports.
- And as a bonus, the new method handles Row Highlights better; see the "Row Highlight 7521" example in this report. Previously, the Row Highlight overruled our changes.
- This method does not work for Interactive Grids, because the id="EMP#EMPNO#" is not substituted correctly. Instead of EMP1234 you just get EMP. Apparently this is a bug that has always existed for Interactive Grids, and is still not fixed in Apex 19.2. Getting this to work would require some pretty sneaky javascript I'm afraid...
The page contains some inline JavaScript to set the colors for the cell and row of the Interactive Grid that are selected, which should be sufficient for most situations.