Introduction/ Issue:
In Oracle APEX, users often need to display additional details related to a record without navigating to a new page. This can be achieved by creating an inline child report within an Interactive Report. The child report appears in the next line when a user clicks on a link, providing a seamless and interactive user experience.
Why we need to do / Cause of the issue:
When working with Interactive Reports, displaying related data in a user-friendly manner can be challenging. Traditional navigation methods, like redirecting to a new page, disrupt user workflows. By implementing an inline child report, we can enhance usability by providing quick access to related data without leaving the primary report view.
How do we solve:
Step 1: Create an Interactive Report
Create an Interactive Report using the following query:
SELECT DEPTNO,
DNAME,
LOC,
NULL AS Employees — (Link column. Clicking this will open the child report in the next line)
FROM CHILD_REPORT_DEPT;
Set the Static ID for the report region to Header.
Step 2: Configure the Link Column
In the Link attribute of the “Employees” column, set the following value:
data-Deptno=”#DEPTNO#”
Step 3: Create a Hidden Item
Add a hidden item to the page:
- Name: P5_DEPTNO_HID
Step 4: Create the Child Report
Create a Classic Report for the child data using the following query:
SELECT EMPNO,
ENAME,
JOB,
MGR,
HIREDATE,
SAL,
COMM,
DEPTNO
FROM CHILD_REPORT_EMP
WHERE DEPTNO = :P5_DEPTNO_HID;
Set the Static ID of this child report region to Detail.
In the Custom Attributes section, add the following inline style to hide the child report initially:
style=”display:none”
Step 5: Add Dynamic Actions
Dynamic Action 1: On Change of P5_DEPTNO_HID
True Action 1: Execute JavaScript
- Action: Execute JavaScript Code
- Event: Change
- Item(s): P5_DEPTNO_HID
JavaScript Code:
gAction = ‘VIEW_CHILD’;
gSpinner = apex.widget.waitPopup();
var vDeptno = this.triggeringElement.value;
gThis = $(‘#Header a[data-Deptno=”‘+vDeptno+'”]’);
$(‘.level1_row’).hide();
$(‘#Detail’).hide();
True Action 2: Refresh Child Report
- Action: Refresh
- Selection Type: Region
- Region: Child Report (Detail)
Dynamic Action 2: On After Refresh of Child Report
True Action: Execute JavaScript
- Action: Execute JavaScript Code
- Event: After Refresh
- Region: Child Report (Detail)
JavaScript Code:
gAction = ”;
let vThis = gThis;
// Get the current row
let currentRow = $(vThis).closest(“tr”);
// Check if the clicked row is already highlighted (expanded)
if (currentRow.hasClass(‘highlight’)) {
// If highlighted, collapse the detail row
$(‘.level1_row’).hide(); // Hide all detail rows
$(‘#Detail’).hide(); // Hide the detail section
$(‘#Header tr’).removeClass(‘highlight’); // Remove highlights from all rows
} else {
// If not highlighted, proceed to expand the detail row
// First, collapse any other expanded detail rows
$(‘.level1_row’).hide();
$(‘#Detail’).hide();
$(‘#Header tr’).removeClass(‘highlight’); // Remove highlights from other rows
// Check if the detail row exists
if ($(‘#Header .level1_row’).length == 0) {
let vColSpan = $(vThis).closest(“tr”).find(“td”).length;
let vClass = $(vThis).closest(“td”).attr(“class”);
let vTR = $(vThis).closest(“tr”);
let vHTML = $(‘<tr class=”level1_row” style=”display: none;”><td class=”‘ + vClass + ‘” colspan=”‘ + vColSpan + ‘” style=”padding: 15px;”></td></tr>’);
$(vHTML).insertAfter($(vTR));
$(‘#Detail’).appendTo($(‘tr.level1_row>td’));
} else {
var vHTML = $(‘tr.level1_row’);
var vTR = $(vThis).closest(“tr”);
$(vHTML).insertAfter($(vTR));
}
// Show the detail rows
$(‘.level1_row’).show();
$(‘#Detail’).show();
// Highlight the currently clicked row
currentRow.addClass(‘highlight’); // Highlight only the current row
}
// Remove spinner
gSpinner.remove();
Conclusion:
By implementing an inline child report, we provide a user-friendly solution that enhances the Interactive Report experience in Oracle APEX. Users can now view detailed information without leaving the main report, improving efficiency and usability.
