Changing individual cell colours in an Apex interactive Report

Problem

You want to put some colour on your interactive report.


I had t go through quite a few forums and blogs to find a simple method.
This one almost gave me a perfect solution.
https://mk-commi.blogspot.co.uk/2016/01/coloring-cells-in-interactive-report.html

Solution

I had a table which stored the colours that I wanted to use, but the concept is the same if you don't have this.

select a.ROWID row_id2,
COMPANY_ID,
b.name tag1_name,
'background-color:'||b.colour tag1_colour,
c.name tag2_name,
'background-color:'||c.colour tag2_colour,
TAG2_ID,
hours
from apex_ebs_extension.XXAPEX_TW_ESTIMATES a,
apeX_ebs_extension.xxapex_tw_tags b,
apeX_ebs_extension.xxapex_tw_tags c
where tag1_id = b.id
and tag2_id = c.id

The colour value in xxapex_tw_tags are simple hex colour values. Example:
#f78234
#37ced0

It works just as well if you want to use colours like "red", "green".

Now that I have my query, I hide the ones I don't want displayed, like tag1_colour, tag1_id.
I go to tag1_name, and find a property called "HTML Expression"


for tag1_name, I set this to
<span data-style=#TAG1_COLOUR#>#TAG1_NAME#</span>

for tag2_name, I set this to
<span data-style=#TAG2_COLOUR#>#TAG2_NAME#</span>

Now for the clever bit which I took directly from the other blog.
Create a dynamic action on your interactive report.
The default will be on refresh, keep it like that. And for the action you want to execute Java Code.





Make sure that it is set to fire on page load.

apex.jQuery("span[data-style]").each(
  function()
  { 
    apex.jQuery(this).
      parent().attr( 'style'
                   , apex.jQuery(this).attr('data-style')
                   ); 
  }
);

This goes through all values with an HTML Expression of "data-style", and sets the colours for each cell.

Works like a charm. My solution is ever-so-slightly different from the one in the other blog. When I tried his, I got data-style within data-style, and it didn't display correctly.

Acknowledgement

https://mk-commi.blogspot.co.uk/2016/01/coloring-cells-in-interactive-report.html

Comments