Skip to Main Content

Settings

Interactive Report

EditEmpnoEnameJob
7369SMITHCLERK
7499ALLENSALESMAN
7521WARDSALESMAN
7566JONESMANAGER
7654MARTINSALESMAN
  • 1 - 5 of 14

Interactive Report (function)

7654
LinkEmpno FEname FJob F
7369SMITHCLERK
7499ALLENSALESMAN
7521WARDSALESMAN
7566JONESMANAGER
7654MARTINSALESMAN
  • 1 - 5 of 14

Classic Report

EditEmpnoEnameJob
7369SMITHCLERK
7499ALLENSALESMAN
7521WARDSALESMAN
7566JONESMANAGER
7654MARTINSALESMAN

Interactive Grid

Info

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.

Code

Page

Identification
Page ID
Name
Css
Inline


Region

Identification
Sequence
Title
Type
Source
Source Type
Region Source
Appearance
Template

Report Column

Column Definition
Column Name
Display Type
Column Heading
Column Link
Link Text
Link Attributes
URL

Item

Identification
Sequence
Name
Display As
User Interface
Region
Advanced
Warn on Unsaved Changes


Region

Identification
Sequence
Title
Type
Source
Source Type
Region Source
Appearance
Template
Ir Link
Link Column
Target
Link Icon
Link Atttributes

Item

Identification
Sequence
Name
Display As
User Interface
Region
Advanced
Warn on Unsaved Changes


Region

Identification
Sequence
Title
Type
Source
Source Type
Region Source
Appearance
Template

Item

Identification
Sequence
Name
Display As
User Interface
Region
Advanced
Warn on Unsaved Changes


Dynamic Action

Identification
Name
Execution Options
Sequence
When
Event
Selection Type
Region
Advanced
Event Scope
True Action
Identification
Action
Settings
Code
Execution Options
Sequence
Fire On Initialization


Package

Package
Name
Source

Package Body

Package Body
Name
Source