Introduction: –
In enquiry, engineering and quality assurance processes, keeping track of pending tasks is crucial for timely project completion. The ability to quickly identify which tasks are still open allows teams to focus their efforts and ensure deadlines are met. To improve visibility and tracking, we’ve added dynamic features to our report that highlight pending Engineering and QA tasks with real-time data, changing colors to make them easy to spot.
The following technologies has been used to achieve the same.
- Oracle APEX
- Java script
Why we need to do: –
The challenge of monitoring the progress of Enquiry, Engineering and QA tasks is that pending items are often hidden among other data, making them harder to address promptly. To mitigate this, it’s essential to have a system that flags pending tasks with immediate visual cues. Highlighting pending items in a report with dynamic colors provides a clear and concise way to prioritize these tasks, ensuring critical issues are addressed before they affect the overall workflow.
How do we solve:
To solve this challenge, two page items were introduced in the report to display the number of pending tasks for Enquiry, Engineering and QA teams. These page items pull real-time data from the database, and we apply dynamic styling to highlight the results. Here’s how we approached it:
Step:1 – Create a Page Item
P521_ALERT1: Displays the count of pending Engineering tasks using the query:
SELECT COUNT(*) FROM CONTREVIEW_TB WHERE Enquiry_COMPLETED_FLAG IS NULL;
P521_ALERT2: Displays the count of pending QA tasks using the query:
SELECT COUNT(*) FROM CONTREVIEW_TB WHERE ENG_COMPLETED_FLAG IS NULL;
P521_ALERT3: Displays the count of pending QA tasks using the query:
SELECT COUNT(*) FROM CONTREVIEW_TB WHERE QA_COMPLETED_FLAG IS NULL;
Step:2 –Dynamic Action with JavaScript:
Using JavaScript, we dynamically adjust the styling of these page items based on the count of pending tasks:
// Get the values of P521_ALERT1 and P521_ALERT2
var alert1Value = $(‘#P521_ALERT1’).text();
var alert2Value = $(‘#P521_ALERT2’).text();
var alert3Value= $(‘#P521_ALERT3’).text();
// Set the styles based on the values
if (alert1Value == 0) {
$(‘#P521_ALERT1’).css(“color”, “green”);
} else {
$(‘#P521_ALERT1’).css(“color”, “red”);
}
if (alert2Value == 0) {
$(‘#P521_ALERT2’).css(“color”, “green”);
} else {
$(‘#P521_ALERT2’).css(“color”, “red”);
}
if (alert3Value== 0) {
$(‘#P521_ALERT3’).css(“color”, “green”);
} else {
$(‘#P521_ALERT3’).css(“color”, “red”);
}
// Apply font size for visibility
$(‘#P521_ALERT1’).css(“font-size”, “30px”);
$(‘#P521_ALERT2’).css(“font-size”, “30px”);
$(‘#P521_ALERT3’).css(“font-size”, “30px”);
If there are zero pending tasks, the text is highlighted in green to indicate that everything is on track.
If the number of pending tasks is greater than zero, the text turns red to signal that attention is needed.
This dynamic styling ensures that users can immediately recognize the status of the Enquiry, Engineering and QA tasks and take appropriate action.
The screenshot above demonstrates the output of the implemented solution. The Contract Review Pending Status section clearly highlights the pending tasks for Enquiry, Engineering, and QA.
Conclusion:
By using dynamic color changes green for zero pending and red for tasks still pending teams can quickly prioritize their work. This approach provides clear, real-time visibility, allowing users to make faster and more informed decisions, ultimately leading to better workflow management and more efficient project execution.
