Introduction:
This project demonstrates a simple yet effective way to enhance the user experience on web pages by highlighting specific rows in an HTML table based on predefined conditions. The core functionality is built using JavaScript and jQuery, enabling dynamic styling of table rows when certain values match criteria in designated columns.
The following technologies has been used to achieve the same.
- Oracle APEX
Why we need to do:
- Improved Data Visibility:In large datasets, it can be difficult to manually find important rows. By highlighting them automatically, users can easily spot key information.
- Enhanced User Experience: Visual cues like color changes help users quickly identify critical data, making the table easier to navigate and understand.
- Error Detection and Reporting: Highlighting rows with specific conditions helps flag errors or issues, allowing users to take action promptly.
- Data Analysis and Decision Making: Easily highlighting important data points helps users make faster decisions by focusing on key values.
- Customizable and Scalable Solution: The approach is flexible and can be adjusted to suit different types of applications and conditions, making it useful in many scenarios.
How do we solve:
Step 1: Create an Interactive Report with Data.
Step 2: Add a JavaScript Dynamic Action and Set the event for the Dynamic Action, such as Page Load or Button Click, based on when you want the script to execute. Specify the affected region where the Dynamic Action should apply.
Step 3: Modify the JavaScript According to the Required Condition
Update the JavaScript code to highlight rows where the First Name is ‘Ann’ and the Last Name is ‘Hill’.CODE:
setTimeout(() => {
$(“tbody tr”).each((rowIndex, rowElement) => {
let FIRST_NAME_VALUE = null;
let LAST_NAME_VALUE = null;
$(rowElement).find(“td”).each((cellIndex, cellElement) => {
const headerText = $(“.a-IRR-header .a-IRR-headerLink”).eq(cellIndex).text().toUpperCase().trim();
const cellText = $(cellElement).text().trim();
if (/\bFIRST NAME\b/.test(headerText)) {
FIRST_NAME_VALUE = cellText;
}
if (/\LAST NAME\b/.test(headerText)) {
LAST_NAME_VALUE = cellText;
}
if (FIRST_NAME_VALUE === “Ann” && LAST_NAME_VALUE === “Hill”) {
$(rowElement).find(“td”).each((cellIndex, cellElement) => {
$(cellElement).css({
“background-color”: “yellow”,
“color”: “red”,
“font-weight”: “bold”
});
});
}
});
});
}, 500);
Result:
The given condition has been successfully highlighted.
Conclusion:
It demonstrates the effective use of JavaScript within Oracle APEX to enhance data visibility and user experience by dynamically highlighting rows based on specific conditions. By integrating conditional formatting, users can quickly identify critical information in large datasets, reducing the need for manual searching and improving decision-making. This approach is scalable and customizable, making it adaptable to various use cases and business requirements.
