APEX - Report Rows Clickable to detailed page

Overview: 1. Purpose. 2. Benefits. 3. Steps   4. Conclusion.

1.  Purpose:

This document describes how to make a Apex Reports clickable to detailed page with an option of entire row selection.

           In Apex, Report is an important tool which is in classical, interactive & other formats. We have an option to bring detailed page from an report screen using column link option. But it is based on single column clickable option, which can be done by applying column link option in report attributes.

Here we are going to detailed page not based on a single column. It will be based on the entire row clickable option using Jquery Properties.  

   2.  Benefits:

Ø We can click anywhere on the entire row of an report, which will brings us an detailed page.

  3.  Steps:

Step1: Create a new page

Step 2: Create a region èreportèInteractive reportèName for the reportèSQL query.

Step 3: Apply Column Link Option to any one of the columns from report.

  Report Region is Created.

Go to Edit Page.

Choose Execute when Page Loads

Apply the following code

$('a[href*="17"]').each(function(index) {

   lnk = $(this).attr('href');

   $(this).parent()

          .parent('tr')

    .attr('data-href', lnk)

    .click(function(){

      window.location=$(this).attr('data-href');

    })

    .mouseover(function(){

      $(this).css('cursor', 'pointer');

    })

    .mouseleave(function(){

      $(this).css('cursor', 'default');

    })

});

Note:

1. href*="17" - is the detailed Page Number.

2. Column which has Link Property has to be showed on report. [ Don’t Hidden the Column ].

4. Conclusion:

Thus a user can able to navigate to detailed page by clicking anywhere on the report row.