Show detail report for IR single row view record

I have previously explain how show detail report when viewing interactive report single row view on OTN forum post. That did work on APEX 3.x, but uses undocumented functions e.g. $a_report.

APEX 4.0 introduced dynamic action. APEX 4.1 introduced "Page Items to Submit" for classic report. Thanks for these enhancements we can do same with documented features.

This example use Product Portal sample application tables.

First create interactive report from query:

SELECT customer_id,
  cust_first_name,
  cust_last_name,
  cust_street_address1,
  cust_street_address2,
  cust_city,
  cust_state,
  cust_postal_code,
  phone_number1,
  phone_number2,
  credit_limit,
  cust_email
FROM demo_customers

Set single row view related attributes:

• Link to Single Row View: Yes
• Uniquely Identify Rows by: Unique Column
• Unique Column: CUSTOMER_ID

Edit page and create hidden item Px_CUSTOMER_ID:

• Value Protected: No
• Source Used: Always, replacing any existing value in session state
• Source Type: Always Null

Create classic report region:

SELECT pi.product_name,
  pi.product_description,
  oi.unit_price,
  SUM(oi.quantity) AS quantity,
  (oi.unit_price * SUM(oi.quantity)) AS extended_price
FROM demo_order_items oi,
  demo_product_info pi,
  demo_orders o
WHERE o.order_id = oi.order_id
AND o.customer_id = :Px_CUSTOMER_ID
AND oi.product_id = pi.product_id
GROUP BY pi.product_name,
  pi.product_description,
  oi.unit_price
ORDER BY pi.product_name

Edit classic report region and add to "Page Items to Submit" hidden item Px_CUSTOMER_ID and to Region Attributes:

style="display:none"

Create dynamic action. Select Advanced:

• Name: Show detail report
• Event: Change
• Selection Type: jQuery Selector
• jQuery Selector: #apexir_DETAIL
• Condition: JavaScript Expression
• Value:

          $v("apexir_current_row").length > 0 && $v("apexir_current_row") !== $v("Px_CUSTOMER_ID")
  
  

• Action: Execute JavaScript code
• Fire On Page Load: False
• Code:

          $s("Px_CUSTOMER_ID",$v("apexir_current_row"));
  
  

• False Action: No False Action
• Selection Type: None

Edit dynamic action and Add True Action:

• Action: Refresh
• Fire On Page Load: False
• Selection Type: Region
• Region: {select your classic report region}

Add another True Action:

• Action: Show
• Fire On Page Load: False
• Selection Type: Region
• Region: {select your classic report region}

Create new dynamic action. Select Advanced:

• Name: Hide detail report
• Event: Click
• Selection Type: jQuery Selector
• jQuery Selector: #apexir_btn_REPORT_VIEW
• Condition: No Condition
• Action: Hide
• Fire On Page Load: False
• Selection Type: Region
• Region: {select your classic report region}

Edit new dynamic action and change Event Scope to "Live" and add another True Action:

• Action: Execute JavaScript code
• Fire On Page Load: False
• Code:

  $s("Px_CUSTOMER_ID","");
  

Now run page and access to interactive report single row view to see detail report.

See working example.