Highlight Data in different colors Using CSS

Use the below code in report query to highlight data with different colors based on conditions

CASE

            WHEN (TRUNC(SYSDATE) > date_down AND date_down IS NOT NULL)

            AND date_out IS NULL

               THEN 'Y'                               ---------------RED COLOR

            WHEN (TRUNC(SYSDATE) > date_out AND date_out IS NOT NULL)

            AND complete_date IS NULL

               THEN 'Z'                               -----------GREEN COLOR

            WHEN (TRUNC(SYSDATE) > complete_date AND complete_date IS NOT NULL)

            AND date_start IS NULL

               THEN 'X'                               --------ORANGE COLOR

            WHEN (    TRUNC(SYSDATE) > date_start

                  AND date_start IS NOT NULL

                  AND ship_date IS NULL

                 )

            AND date_complete IS NULL

               THEN 'P'                               --------YELLOW COLOR

            WHEN ((ship_date - TRUNC (SYSDATE) <= 2) AND ship_date IS NOT NULL

                 )

            AND date_complete IS NULL

               THEN 'Q'                               ---------BLUE COLOR

           

ELSE 'N'                                 ---------GREY COLOR

         END css_style

Use the below Javascript code for coloring.

//function to set css-bg color
function fn_css()
{

var i = 1;
var b,a,c,f;
while (i != 0) {
b = "000" + i;
b = pad(i, 4);
a = $('#f20_'+b).val(); //ID of CSS_STYLE column
c = "#f08_"+b; //ID of column to be highlighted
f = "f08_"+b;//date_out
g = "f10_"+b;//complete
h= "f12_"+b;//date_start
k= "f13_"+b;//date_complete

if (typeof a === "undefined") {
i=0;
}
else
{
//alert(g);

if (a == 'Y') {

/*Appying bg color to the closest row with ID f05_0001(first row, if 2nd row - f05_0002 and so on ) */
$(c).closest("tr").find('input[id="'+f+'"]').css("background-color","red");

}
else if(a == 'Z') {

$(c).closest("tr").find('input[id="'+g+'"]').css("background-color","green");

}
else if(a == 'X') {

$(c).closest("tr").find('input[id="'+h+'"]').css("background-color","orange");

}
else if(a == 'P') {

$(c).closest("tr").find('input[id="'+k+'"]').css("background-color","yellow");

}
else if(a == 'Q') {

$(c).closest("tr").children("td").css("background-color","blue");
}
i= i+1;
}
}
}

Check Data type using JavaScript

Use the below script to perform duplicate data validation along with numeric data type validation in Javascript.

<!--duplicate checking for lpn -->
<script>
function check_lpn(pThis)
{
var j_item_id=pThis.id;
var k_item_id='#f02'+j_item_id.substr(3);
//alert(j_item_id);
//alert(k_item_id);
var h='#'+j_item_id;
//alert(h);
var a= $(h).val();
var g=$(k_item_id).val();
//alert(a);
//alert(g);
if(isNaN(a)){
alert('The LPN is not numeric.Kindly enter numeric values');
$(h).focus();
}
else{
if (g)
{
var get = new htmldb_Get(null, $v('pFlowId'),'APPLICATION_PROCESS=Duplicate_LPN_check',$v('pFlowStepId'));
get.add('AI_LPN',a);
//get.add('AI_SHIPPING_ID',g);
ret = get.get();
//alert(ret);
if (ret != 0)
{
var get = new htmldb_Get(null, $v('pFlowId'),'APPLICATION_PROCESS=Duplicate_LPN_Shipping_id',$v('pFlowStepId'));
get.add('AI_LPN',a);
ret = get.get();
if(ret != g)
{
alert('The LPN is already present.Kindly select another LPN');
$(h).val(null);
$(h).focus();
}
}
}
else
{
var i = 1;
var j=0;
var b,a,c,f;
while (i != 0) {
b = "000" + i;
b = pad(i, 4);
d = $('#f05_'+b).val();
//alert(d);
//alert(typeof d);
if (typeof d === "undefined") {
i=0;
}
else
{
if(a == d)
{j= j+1;
}
if(j>1)
{
alert('The LPN is already present.Kindly select another LPN');
$(h).val(null);
$(h).focus();
break;
}
i= i+1;
}
}
}
}
}
</script>

Check duplicate data using Javascript

Use the below Javascript to identify duplicate data - In this sample code, when user enters order number in the tabular form, an error will be thrown if the order number already exists.

<!--duplicate checking for order no -->
<script>
function check_order_no(pThis)
{
var j_item_id=pThis.id;
var k_item_id='#f02'+j_item_id.substr(3);
//alert(j_item_id);
//alert(k_item_id);
var h='#'+j_item_id;
//alert(h);
var a= $(h).val();
var g=$(k_item_id).val();
//alert(a);
//alert(g);

if (g)
{
var get = new htmldb_Get(null, $v('pFlowId'),'APPLICATION_PROCESS=Duplicate_Order_no_check',$v('pFlowStepId'));
get.add('AI_ORDER_NO',a);
//get.add('AI_SHIPPING_ID',g);
ret = get.get();
//alert(ret);
if (ret != 0)
{
var get = new htmldb_Get(null, $v('pFlowId'),'APPLICATION_PROCESS=Duplicate_Order_no_shipping_id',$v('pFlowStepId'));
get.add('AI_ORDER_NO',a);
ret = get.get();
if(ret != g)
{
alert('The Order No is already present.Kindly select another Order No');
$(h).val(null);
$(h).focus();
}
}
}
else
{
var i = 1;
var j=0;
var b,a,c,f;
while (i != 0) {
b = "000" + i;
b = pad(i, 4);
d = $('#f03_'+b).val();
//alert(typeof d);
if (typeof d === "undefined") {
i=0;
}
else
{
if(a == d)
{j= j+1;
}
if(j>1)
{
alert('The Order No is already present.Kindly select another Order No');
$(h).val(null);
$(h).focus();
break;
}
i= i+1;
}
}
}
}
</script>