Conditionally Formatting background color for Interactive Report Cells of type link

Question

I have to color certain cells within my Interactive Report Region based on a hidden column value. I started by following this article and many others with similar information here but this doesn't seem to work when the column you want to format is a link column.

More or less I am wrapping the column I want to format with css class called data-styles that has the attribute background-color:#COLUMN_VALUE# and then executing the following js code when the page loads to add the class to its parent element.

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

This works perfectly fine when the column type is plain text, but I need it to be a link. Any help would be greatly appreciated!

Answer 1

The solution in that blog will only ever work for columns of type "Plain Text" because it uses the "HTML Expression" attribute which only exists in that column. Here is a solution similar to the one in the blogpost. For the link column use a column of type "Plain Text". Then generate the link the query using apex_page.get_url.

SQL

SELECT empno,
       ename,
       job,
       mgr,
       hiredate,
       sal,
       comm,
       deptno,
       apex_page.get_url(p_page => 200) as URL,
       CASE WHEN sal <= 1500 THEN 'green' 
            WHEN sal > 1500 AND sal <= 3000 THEN 'orange'
            WHEN sal > 3000 THEN 'red'
            ELSE NULL
       END BGCOLOR
  FROM emp

HTML Expression for SAL column

<span data-style="background-color:#BGCOLOR#;"><a href="#URL#">#SAL#</a></span>

Dynamic Action

Dynamic Action:

• Event: After Refresh

Action:

• Fire on initialization: Yes
• Javascript Code:

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