Add CSS/JQuery conditional formatting Oracle Apex form based on value

0
votes
  • Oracle = 11G
  • Apex = 4.2.6

I have a very large custom matrix grid within Oracle APex. This displays the name, area and day number of month (1,2,3 i.e) as headers.

With rows going down 350. with in each cell is a task type. so each member of staff has a task for each day.

This is displayed in an interactive report.

What I need to do now is highlight specific cells based on task type..

So for example the Background cell will be red for sick, green for weekend and so on.

I could use extra columns 

for case when "MD_TS_DETAIL"."JOB_TYPE_ID"= 20 then '#b0c4de'
        when "MD_TS_DETAIL"."JOB_TYPE_ID" = 115 then '#000000'
   end text_color_1,

case when "MD_TS_DETAIL"."JOB_TYPE_ID"= 20 then 'blue'
        when "MD_TS_DETAIL"."JOB_TYPE_ID" = 115 then 'red'
   end back_color_1

then call in the column attribute. But to do this I will need to do this up to 31 times and not very dynamic.

Or could use the highlight inside the action selector, but again this would require 1 filter for each word and each colour. which again is not a good solution.

So is possible to call the CSS or jQuery based on a value dynamically.

As I don't think this is possible

3
jquerycssoracleoracle-apex

3 Answers

1
votes

Solution with CSS and jQuery. As you mentioned you need a client side solution. I would like to prefer to use the dynamic action, so that it takes the resource from Client Side.

Please follow the below steps.

  1. Create Dynamic Actions (Component View --> Dynamic Actions --> Press the + Button). Please make some change to the attributes of the Dynamic Action. (Event - Page Load , No condition for Client and Server side conditions).
  2. Expand the new added dynamic action (lets assume name is AddClass), you can find two folders/actions under that, True and False. Under the True Action add new action called show.
  3. Make some changes to the added action under the True (Selection Type - JavaScript Expression , in the JavaScript Expression paste the below code.)

$(document).ready(function() {
    $("td:nth-child(6)").each(function() {
        if ($(this).text() === "sick") {
            $(this).parent().children().css({'background-color': 'red'});
        }
        else if($(this).text() === "weekend"){
            $(this).parent().children().css({'background-color': 'green'});
        }
    });
});

Note :

  1. This represents td:nth-child(6) that the Sick/Weekend data available in the column 6 of the table that is rendered. (Change the number 6 to 3 if the data available in column 3)

  2. The above code will highlight the entire row and if you need that to update only that specific column use the below code.

$(document).ready(function() {
    $("td:nth-child(6)").each(function() {
        if ($(this).text() === "sick") {
            $(this).css({'background-color': 'red'});
        }
        else if($(this).text() === "weekend"){
            $(this).css({'background-color': 'green'});
        }
    });
});
0
votes

Something like this? http://www.grassroots-oracle.com/2013/06/highlight-cell-background-in-apex-report.html

It's early jQuery for me so it could be cleaned up, but looks like it might help you accomplish your task.

0
votes

EDIT: This is probably not a great answer given the size of your matrix, as it would result in an extra 200kB or more of unnecessary data transfer. Client-side is the right approach here.

You could put the logic in your report query. Assuming you've set up your CSS with class_name1, class_name2 etc, something like this would probably do it. Remember to set the column display type as "Standard Report Column" so that the HTML is interpreted.

select '<div class="'||
       case MD_TS_DETAIL.JOB_TYPE_ID
       when 20  then 'class_name1'
       when 115 then 'class_name2'
       -- etc
       end||'">'||YOUR_COLUMN||'</div>'
...