- Oracle JET Routing - 22. November 2018
- Using Vagrant and Docker for APEX Development – a DOAG story - 21. November 2018
- Social Sign-In in Oracle APEX for Microsoft Azure - 4. November 2018
In one of our Oracle JET projects we had to come up with a new interesting feature for the JET date picker component. The customer requested to display an indicator for each day, which referred to the completion of the tasks on the specific date. For example, if all the tasks were completed, a green indicator will be shown; otherwise, a red one appears. A default inline Oracle JET calendar looks like the following example:
But our customer was expecting something like this:
By default, Oracle JET is not supporting this type of behavior, so we had to be “inventive”. With a bit of research, we identified that the date time picker is generating for each day a TD node with an ID that starts with “oj-dp-0-”. With a bit of JQuery magic, we came up with the following code, which depicts our solution for implementing the previously mentioned feature:
$.each( $('[id^="oj-dp-0-"]'), function () {
var text = $(this).text();
if( text != undefined && text.trim() != '' ) {
if(parseInt(text) < 15) {
$(this).html('<div style="width: 10px;height: 10px;background-color: red;float: left;position: absolute;border-radius: 10px;"> </div>'+$(this).html());
} else {
$(this).html('<div style="width: 10px;height: 10px;background-color: green;float: left;position: absolute;border-radius: 10px;"> </div>'+$(this).html());
}
}
});
Now, all that remains is to hook up a REST service that returns the status information for each day of the selected month.
