CODEWITHSUNDEEP
javascriptcssoracle-databaseoracle11goracle-apex
Mayhem Mischief
Mayhem Mischief

Reputation: 113

Oracle APEX: Color the values in column of tabular form

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

Upvotes: 2

Views: 2460

Answers (1)

Typo
Typo

Reputation: 1900

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

Upvotes: 1

Related Questions