Oracle APEX: Color the values in column of tabular form

Question

I have a tabular form where I want to display the value of column delta in different colors. Delta is difference between column1 and column2, which I am generating dynamically.

If the delta value is >0 no change in color and if delta is <0 the value should be in red color else green if value is 0.

I am using oracle APEX VERSION : 4.2.1

I can give you an example in javascript with css, could you post the column names? — Typo
No, when I submit the page to save the values, the color of negative values in DELTA column should be in red color — Mayhem Mischief

Typo Typo · Accepted Answer · 2016-01-18T11:50:13

A similar problem hapened to me some time ago, what I did was:

First declare a css class

.cellColored{background-color:#ff0000 !important} 

/*notice the !important attribute, if not declared the browser will use the apex css definition*/

Then go to your tabular form definition -> Region Definition -> Attributes In Static ID add and id like this:

tab_form_id

Then go to Report Atributes in your tabular form definition and edit the column you want to paint,in the field 'Element Attributes' add this: class='classDelta'

Then run a javascript function to asign the cellColored class to the table cells that fit the criteria, something like this:

function paintCells(){
    var tabForm = document.getElementById('tab_form_id');
    var cells = tabForm.getElementsByTagName('td');
    for(var i = 0; i < cells.length; i++){  
        if((cells[i].headers === 'DELTA') && (Number(cells[i].getElementsByClassName('classDelta')[0].value) < 0)){
                            cells[i].className = cells[i].className + ' cellColored';
        }
    }
}

Notice the cells[i].headers === 'DELTA' line, this should be the name of the column as defined in the report.

EDIT

The above was for input type elements, for read only columns you need to use this function:

function paintCells(){
    var tabForm = document.getElementById('tab_form_id');
    var cells = tabForm.getElementsByTagName('td');
    for(var i = 0; i < cells.length; i++){  
        if((cells[i].headers === 'DELTA') && (Number(cells[i].innerHTML) < 0)){
                            cells[i].className = cells[i].className + ' cellColored';
        }
    }
}

Oracle APEX: Color the values in column of tabular form

1 Answers