Apex - Reports - Row Highlight

P1047_EMPNO

7521

Empno	Ename	Job
7369	SMITH	CLERK
7499	ALLEN	SALESMAN
7521	WARD	SALESMAN
7566	JONES	MANAGER
7654	MARTIN	SALESMAN

1 - 5 of 14

P1047_EMPNO_FUNCTION

Empno F	Ename F	Job F
7369	SMITH	CLERK
7499	ALLEN	SALESMAN
7521	WARD	SALESMAN
7566	JONES	MANAGER
7654	MARTIN	SALESMAN

1 - 5 of 14

P1047_EMPNO_CLASSIC

Empno	Ename	Job
7369	SMITH	CLERK
7499	ALLEN	SALESMAN
7521	WARD	SALESMAN
7566	JONES	MANAGER
7654	MARTIN	SALESMAN

row(s) 1 - 5 of 14

Edit

Empno

Ename

Job

Edit

Empno

Ename

Job

7839

KING

PRESIDENT

7698

BLAKE

MANAGER

7782

CLARK

MANAGER

7566

JONES

MANAGER

7788

SCOTT

ANALYST

7902

FORD

ANALYST

7369

SMITH

CLERK

7499

ALLEN

SALESMAN

7521

WARD

SALESMAN

7654

MARTIN

SALESMAN

7844

TURNER

SALESMAN

7876

ADAMS

CLERK

7900

JAMES

CLERK

7934

MILLER

CLERK

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.

Page

Identification
	Page ID	1047 1047
	Name	Apex - Reports - Row Highlight xxxxxxxxxx Apex - Reports - Row Highlight
Css
Css	Inline	.a-GV-table tr.is-selected .a-GV-cell { background-color: BlanchedAlmond; } .a-GV-table tr.is-selected .a-GV-cell:first-child { background-color: #FFBB44; } .a-GV-table .a-GV-cell.is-focused { box-shadow: none; } .a-IRR-sortWidget-actions { display:none; } x .a-GV-table tr.is-selected .a-GV-cell { background-color: BlanchedAlmond; } .a-GV-table tr.is-selected .a-GV-cell:first-child { background-color: #FFBB44; } .a-GV-table .a-GV-cell.is-focused { box-shadow: none; } .a-IRR-sortWidget-actions { display:none; }

Region

Identification
	Sequence	20 xxxxxxxxxx 20
	Title	Interactive Report xxxxxxxxxx Interactive Report
	Type	Interactive Report xxxxxxxxxx Interactive Report
Source
	Source Type	Interactive Report xxxxxxxxxx Interactive Report
	Region Source	select emp.empno as edit , emp.* from emp xxxxxxxxxx select emp.empno as edit , emp.* from emp
Appearance
Appearance	Template	Standard xxxxxxxxxx Standard

Report Column

Column Definition
	Column Name	EDIT xxxxxxxxxx EDIT
	Display Type	WITHOUT_MODIFICATION xxxxxxxxxx WITHOUT_MODIFICATION
	Column Heading	Edit xxxxxxxxxx Edit
Column Link
	Link Text	<img src="#APEX_FILES#app_ui/img/icons/apex-edit-pencil-alt.png" class="apex-edit-pencil-alt" alt=""> xxxxxxxxxx <img src="#APEX_FILES#app_ui/img/icons/apex-edit-pencil-alt.png" class="apex-edit-pencil-alt" alt="">
	Link Attributes	id="EMP#EMPNO#" xxxxxxxxxx id="EMP#EMPNO#"
	URL	f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.::&DEBUG.::P1047_EMPNO:#EMPNO# xxxxxxxxxx f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.::&DEBUG.::P1047_EMPNO:#EMPNO#

Item

Identification
	Name	P1047_EMPNO xxxxxxxxxx P1047_EMPNO
	Display As	Text Field xxxxxxxxxx Text Field
Advanced
Advanced	Warn on Unsaved Changes	Page Default xxxxxxxxxx Page Default

Region

Identification
	Sequence	30 xxxxxxxxxx 30
	Title	Interactive Report (function) xxxxxxxxxx Interactive Report (function)
	Type	Interactive Report xxxxxxxxxx Interactive Report
Source
	Source Type	Interactive Report xxxxxxxxxx Interactive Report
	Region Source	return ted_p1047.emp_table; xxxxxxxxxx return ted_p1047.emp_table;
Appearance
Appearance	Template	Standard xxxxxxxxxx Standard
Ir Link
	Link Column	Custom Link target xxxxxxxxxx Custom Link target
	Target	f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.::&DEBUG.::P1047_EMPNO_FUNCTION:#EMPNO_F# xxxxxxxxxx f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.::&DEBUG.::P1047_EMPNO_FUNCTION:#EMPNO_F#
	Link Icon	<span role="img" aria-label="Edit" class="fa fa-edit" title="Edit"></span> xxxxxxxxxx <span role="img" aria-label="Edit" class="fa fa-edit" title="Edit"></span>
	Link Atttributes	id="EMP_F#EMPNO_F#" xxxxxxxxxx id="EMP_F#EMPNO_F#"

Item

Identification
	Name	P1047_EMPNO_FUNCTION xxxxxxxxxx P1047_EMPNO_FUNCTION
	Display As	Text Field xxxxxxxxxx Text Field
Advanced
Advanced	Warn on Unsaved Changes	Page Default xxxxxxxxxx Page Default

Region

Identification
	Sequence	40 xxxxxxxxxx 40
	Title	Classic Report xxxxxxxxxx Classic Report
	Type	Report xxxxxxxxxx Report
Source
	Source Type	Report xxxxxxxxxx Report
	Region Source	select emp.empno as edit , emp.* from emp xxxxxxxxxx select emp.empno as edit , emp.* from emp
Appearance
Appearance	Template	Standard xxxxxxxxxx Standard

Item

Identification
	Name	P1047_EMPNO_CLASSIC xxxxxxxxxx P1047_EMPNO_CLASSIC
	Display As	Text Field xxxxxxxxxx Text Field
Advanced
Advanced	Warn on Unsaved Changes	Page Default xxxxxxxxxx Page Default

Region

Identification
	Sequence	50 xxxxxxxxxx 50
	Title	Interactive Grid xxxxxxxxxx Interactive Grid
	Type	Interactive Grid xxxxxxxxxx Interactive Grid
Source
	Source Type	Interactive Grid xxxxxxxxxx Interactive Grid
	Region Source	select emp.empno as edit , emp.empno , emp.ename , emp.job from emp xxxxxxxxxx select emp.empno as edit , emp.empno , emp.ename , emp.job from emp

Dynamic Action

Identification
Identification	Name	Row Highlight xxxxxxxxxx Row Highlight
Execution Options
Execution Options	Sequence	10 xxxxxxxxxx 10
When
	Event	After Refresh xxxxxxxxxx After Refresh
	Selection Type	Region xxxxxxxxxx Region
	Region	Interactive Report xxxxxxxxxx Interactive Report
Advanced
Advanced	Event Scope	Dynamic xxxxxxxxxx Dynamic
True Action
True Action		xxxxxxxxxx
Identification
Identification	Action	Execute JavaScript Code xxxxxxxxxx Execute JavaScript Code
Settings
Settings	Code	// Interactive Reports: highlight the row if ($v('P1047_EMPNO')) { var row = document.getElementById("EMP&P1047_EMPNO.").parentElement.parentElement; for (var j = 0; j < row.cells.length; j++) { row.cells[j].style.setProperty("background-color", "BlanchedAlmond", "important"); } } if ($v('P1047_EMPNO_FUNCTION')) { var row = document.getElementById("EMP_F&P1047_EMPNO_FUNCTION.").parentElement.parentElement; for (var j = 0; j < row.cells.length; j++) { row.cells[j].style.setProperty("background-color", "BlanchedAlmond", "important"); } } // Interactive Reports: highlight the cell if ($v('P1047_EMPNO')) { var row = document.getElementById("EMP&P1047_EMPNO.").parentElement.parentElement; row.cells[0].style.setProperty("background-color", "#FFBB44", "important"); } if ($v('P1047_EMPNO_FUNCTION')) { var row = document.getElementById("EMP_F&P1047_EMPNO_FUNCTION.").parentElement.parentElement; row.cells[0].style.setProperty("background-color", "#FFBB44", "important"); } // Classic Reports: highlight the row if ($v('P1047_EMPNO_CLASSIC')) { var row = document.getElementById("EMP&P1047_EMPNO_CLASSIC._CLASSIC").parentElement.parentElement; for (var j = 0; j < row.cells.length; j++) { row.cells[j].style.setProperty("background-color", "BlanchedAlmond", "important"); } } // Classic Reports: highlight the row (old method which still works) // $('#EMP&P1047_EMPNO_CLASSIC._CLASSIC').parent().parent().css('background-color','#FFBB44'); // Classic Reports: highlight the cell if ($v('P1047_EMPNO_CLASSIC')) { var row = document.getElementById("EMP&P1047_EMPNO_CLASSIC._CLASSIC").parentElement.parentElement; row.cells[0].style.setProperty("background-color", "#FFBB44", "important"); } // Classic Reports: highlight the cell (old method which still works) // $('#EMP&P1047_EMPNO_CLASSIC._CLASSIC').parent().css('background-color','#FFBB44'); xxxxxxxxxx // Interactive Reports: highlight the row if ($v('P1047_EMPNO')) { var row = document.getElementById("EMP&P1047_EMPNO.").parentElement.parentElement; for (var j = 0; j < row.cells.length; j++) { row.cells[j].style.setProperty("background-color", "BlanchedAlmond", "important"); } } if ($v('P1047_EMPNO_FUNCTION')) { var row = document.getElementById("EMP_F&P1047_EMPNO_FUNCTION.").parentElement.parentElement; for (var j = 0; j < row.cells.length; j++) { row.cells[j].style.setProperty("background-color", "BlanchedAlmond", "important"); } } // Interactive Reports: highlight the cell if ($v('P1047_EMPNO')) { var row = document.getElementById("EMP&P1047_EMPNO.").parentElement.parentElement; row.cells[0].style.setProperty("background-color", "#FFBB44", "important"); } if ($v('P1047_EMPNO_FUNCTION')) { var row = document.getElementById("EMP_F&P1047_EMPNO_FUNCTION.").parentElement.parentElement; row.cells[0].style.setProperty("background-color", "#FFBB44", "important"); } // Classic Reports: highlight the row if ($v('P1047_EMPNO_CLASSIC')) { var row = document.getElementById("EMP&P1047_EMPNO_CLASSIC._CLASSIC").parentElement.parentElement; for (var j = 0; j < row.cells.length; j++) { row.cells[j].style.setProperty("background-color", "BlanchedAlmond", "important"); } } // Classic Reports: highlight the row (old method which still works) // $('#EMP&P1047_EMPNO_CLASSIC._CLASSIC').parent().parent().css('background-color','#FFBB44'); // Classic Reports: highlight the cell if ($v('P1047_EMPNO_CLASSIC')) { var row = document.getElementById("EMP&P1047_EMPNO_CLASSIC._CLASSIC").parentElement.parentElement; row.cells[0].style.setProperty("background-color", "#FFBB44", "important"); } // Classic Reports: highlight the cell (old method which still works) // $('#EMP&P1047_EMPNO_CLASSIC._CLASSIC').parent().css('background-color','#FFBB44');
Execution Options
	Sequence	10 xxxxxxxxxx 10
	Fire On Initialization	Yes xxxxxxxxxx Yes

Package

Package
	Name	TED_P1047 xxxxxxxxxx TED_P1047
	Source	package ted_p1047 is function emp_table return varchar2 ; end ted_p1047; xxxxxxxxxx package ted_p1047 is function emp_table return varchar2 ; end ted_p1047;

Package Body

Package Body
	Name	TED_P1047 xxxxxxxxxx TED_P1047
	Source	package body ted_p1047 is function emp_table return varchar2 is begin return 'select empno as empno_f, ename as ename_f, job as job_f from emp'; end emp_table; end ted_p1047; xxxxxxxxxx package body ted_p1047 is function emp_table return varchar2 is begin return 'select empno as empno_f, ename as ename_f, job as job_f from emp'; end emp_table; end ted_p1047;

Settings

Interactive Report

Report Settings

Interactive Report (function)

Classic Report

Interactive Grid

Grid Settings

Info

Code

Page

Region

Report Column

Item

Region

Item

Region

Item

Region

Dynamic Action

Package

Package Body

Column Actions

Column Actions