Introduction:
In Oracle APEX, Interactive Grids often display fixed column headings, which may not suit scenarios where data is time-bound or varies with user input. When working with reports spanning different date ranges, static headings can confuse users and reduce clarity. A dynamic heading update ensures the displayed data is contextually aligned with the chosen time period. This improves both user experience and data comprehension. By leveraging JavaScript with APEX’s Interactive Grid API, column headings can be modified on the fly without reloading the entire page.
The following technologies have been used to dynamically change the property of IG headings in Oracle APEX
- Oracle APEX
- JavaScript / jQuery
Why we need to do: –
In many business applications, reports are generated based on specific date ranges rather than fixed timeframes. Manually updating column headings for each change is time-consuming and error prone. Dynamic heading changes allow users to instantly understand which months or periods the data represents. This eliminates guesswork and improves accuracy in analysis. It also supports real-time adjustments when exploring trends over different periods.
How do we solve:
- Create a region with Interactive Grid.
- Add two Date Picker page items (e.g., P18_START_DATE and P18_END_DATE) and a Submit
- Create a Dynamic Action on the button’s Click
- Set the Action to Execute JavaScript Code.
- Paste the provided JavaScript code inside the Dynamic Action to dynamically rename column headings based on the selected date range.
- When the button is clicked, the Interactive Grid column headings will refresh to reflect the chosen months in the date range.
Code
let startDate = new Date($v('P18_START_DATE'));
let endDate = new Date($v('P18_END_DATE'));
function getMonthRange(start, end) {
let months = [];
let date = new Date(start.getFullYear(), start.getMonth(), 1);
while (date <= end) {
months.push(date.toLocaleString('default', { month: 'long' }));
date.setMonth(date.getMonth() + 1);
}
return months;
}
let monthNames = getMonthRange(startDate, endDate);
let gridView = apex.region('renameCol').widget().interactiveGrid("getViews", "grid");
let columns = gridView.getColumns();
// Filter out permanently hidden columns
let visibleCols = columns.filter(col => !col.hidden);
// Now, apply logic from visible index 2 onward
let monthStartIndex = 0;
visibleCols.forEach(function(col, visibleIdx) {
if (visibleIdx < monthStartIndex) {
col.hidden = false; // Static columns stay visible
} else if (visibleIdx < monthStartIndex + monthNames.length) {
let monthIdx = visibleIdx - monthStartIndex;
col.heading = monthNames[monthIdx];
col.width = 100;
col.hidden = false;
} else {
col.hidden = true; // Hide all others
}
});
gridView.refreshColumns();
gridView.refresh();
When you click the button after selecting a date range, the column headings will automatically update to reflect the corresponding months.
Conclusion :-
This solution makes the Interactive Grid more dynamic and user-friendly. Once a date range is selected and the button is clicked, column headings update automatically to match the chosen months. It ensures the displayed data is always aligned with the user’s selection. This reduces manual adjustments and improves data clarity. Users can explore different time periods quickly without reloading the page. Overall, it delivers a smarter and more efficient reporting experience in Oracle APEX.
