Thursday 28 December 2017

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;
}
}
}

1 comment: