Introduction:
Interactive reports are useful tools in web applications that allow users to view and interact with data. Sometimes, the default column widths in these reports are not suitable for certain types of data, like dates or long text, which can make the content hard to read.
Using JavaScript, we can customize column widths to improve readability and presentation. This document explains a simple method to adjust column widths dynamically and its practical benefits.
The following technologies has been used to achieve the same.
- Oracle APEX
Why we need to do:
· Better Readability: Wider columns prevent text from being cut off, making it easier to read.
· Improved User Experience: Users can personalize the report layout to suit their needs.
· Avoid Text Wrapping: Prevents text from wrapping awkwardly in narrow columns, ensuring it stays clean.
· Responsive Design: Adjusting columns helps the report look good on all devices (mobile, tablet, desktop).
· Better Data Display: Allows more space for important data like dates and numbers.
How do we solve:
Step 1: Choose the Interactive Report type and follow the steps to set up your report with the necessary data source. (I want to stretch the “Customer_Name” and “Entry_Date” columns because they are wrapped.)
Step 2: Create a Dynamic Action on the page
Go to the Page and create a Dynamic Action with the event set to Page Load.
Add a JavaScript True Action and paste the following code:
CODE:
setTimeout(() => {
$(“.a-IRR-header .a-IRR-headerLink”).each((headerIndex, headerElement) => {
if (/\bDATE\b/.test($(headerElement).text().toUpperCase())) {
$(headerElement).css({ “white-space”: “nowrap”, “width”: “150px” });
$(“tbody tr”).each((rowIndex, rowElement) => {
$(rowElement).find(“td”).each((cellIndex, cellElement) => {
if (headerIndex === cellIndex) {
$(cellElement).css({ “white-space”: “nowrap”, “width”: “150px” });
}
});
});
}
});
$(“.a-IRR-header .a-IRR-headerLink”).each((headerIndex, headerElement) => {
if (/\bCUSTOMER NAME\b/.test($(headerElement).text().toUpperCase())) {
$(headerElement).css({ “white-space”: “nowrap”, “width”: “150px” });
$(“tbody tr”).each((rowIndex, rowElement) => {
$(rowElement).find(“td”).each((cellIndex, cellElement) => {
if (headerIndex === cellIndex) {
$(cellElement).css({ “white-space”: “nowrap”, “width”: “150px” });
}
});
});
}
});
}, 500);
Result:
The columns are now stretched successfully.
Conclusion:
In this we successfully customized the column widths in an Oracle APEX Interactive Report using JavaScript. By adjusting the widths of the “DATE” and “Customer Name” columns and preventing text wrapping, we improved the readability and appearance of the report. This made the data easier to view and the report more user-friendly, ensuring that the important information was displayed clearly and efficiently.
Recent Posts
