Skip to Main Content
Posted on

APEX 4 color classic report single column cells

Category APEX and jQuery

Here is how color single column cells in classic report. I have use Tyler Muth's Blog Conditional Column Formatting in APEX tip for this.

Create report region from query

SELECT e.*,
  CASE
    WHEN sal < 1000
    THEN 'red'
    WHEN sal BETWEEN 1000 AND 2000
    THEN 'yellow'
    WHEN sal > 2000
    THEN 'green'
  END the_color
FROM emp e

Edit region definition and give Static ID EMP_REPORT. Edit "the_color" column attributes and change Display As to Hidden.

Copy your report template to new name and edit template.

Column template need have headers attribute. Change Column Template 1 Like below:

<td #ALIGNMENT# headers="#COLUMN_HEADER_NAME#" class="data">#COLUMN_VALUE#</td>

Change report to use new template.

Create dynamic Action. Select Advanced

  • Name: Color Report Cells
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code: 
    $('#EMP_REPORT input[name="f01"]').each(function(i){
  $(this).parents("tr:first").find('[headers="SAL"]').css({"background-color":$v(this)});
 });
  • Selection Type: None

See working example.

Check also relating post in OTN forum

Comments

  • Jari Laine 26 Oct 2013

    Hi Ajk,

    It most probably depend theme your are using.

    Could you please reproduce this on apex.oracle.com and share developer login details to workspace.

    Regards,
    Jari

  • Ajk 25 Oct 2013

    Hi,

    I use the same solution and displays the color for the single column on page load. But the color disappers when i put the mouse over the row.

    Can you please advice. I am using Apex 4.1

  • Jari Laine 16 Mar 2012

    Hi,

    Probably this do not work for form because hidden column containing cell color is also submitted and you do not have that column in table. You will get errors on insert and update ?

    If you can have some non updatable column where you concatenate hidden input html and use e.g. class as jQuery selector in dynamic action.

    Regards, Jari

  • ApexJoy 16 Mar 2012
    Very nice! Could this work on a Tabular Form? Tried it, no luck so far....
  • Jari Laine 25 Feb 2012

    Hi,

    Please create example of problem to apex.oracle.com so I can take a look.

    Regards, Jari

  • Djaydine 24 Feb 2012
    Hi, thanks for this tips. I followed all steps but nothng seems to happen when I run the page where my report is. - My template has been modified to have "headers" - I have a hidden column that contains the color that I want to display as background - I gave a static ID to my report region - I created a dynamic action with your parameters My javascript code is : 
    $('#ANIMATIONS_REPORT input[name="f01"]').each(function(i){
  $(this).parents("tr:first").find('[headers="MACHINES_SOLD"]').css({"background-color":$v(this)});
 });
    Where : - ANIMATIONS_REPORT is the static ID of my report region - MACHINES_SOLD is the header name of the column I want to be colored. I edited my source page and I can see correctly that every row of my report has the header attribute. I can also see that f01 correspond to my color column. Is there something to include in the HTML header (maybe a jquery lib or something like that) ? Thanks for your help Djay.
  • Jari Laine 25 Jan 2012

    Hi,

    When we edit "the_color" column attributes and change Display As to Hidden, this column value will be in hidden input tag.

    We select all these inputs:

    $('#EMP_REPORT input[name="f01"]')

    and loop those. We get loop current input tag value using APEX JavaScript API v function

    $v(this)

    Hope this explain how "the_color" column is linked to dynamic action.

    This example works only for classic report.

    Regards, Jari

  • Joe 25 Jan 2012
    I am just not understanding the link between &quot;the_color&quot; column from the report source query and the java script snippet in the dynamic action. I can see that the snippet is setting the &quot;background-color&quot; attribute (which is exactly what we want) but, I don't see how it can tell to use the value stored in the &quot;the_color&quot; column to do this. Can you explain how &quot;this&quot; or &quot;$v(this)&quot; makes this connection? Sorry if I am being dense but, I think I have a better chance of getting it to work if I understand rather than just trying to parrot it. In my case, we will have several color columns being populated that, in turn, need to be applied to different columns. Also, should the above also work for IR? Thanks.
  • shoaib 24 Jan 2012
    Hi Jari, just tell me what to do,coz we dont have template in Interactive report. Thanks in advance. Thanks and Regards, Shoaib
  • Jari Laine 23 Jan 2012

    Hi,

    This solution works only for Classic Report. You need do own solution for Interactive Reports.

    Regards, Jari