This document is to give background color to cell or change font color of the cell from query using Jquery.
Technology and Tool Used :
o SQL
o JQuery
Use Case :
If a requirement arise from user to highlight a cell based on dynamic condition from query or based on a column value or based on any calculation we can achieve it with this codes. In-built apex feature will highlight the entire row and user can also remove the row wise filter. But this can be overcome with the below codes.
Steps to be followed:
Step 1 : Create a simple report query with employee table or build a own report query and to that add your condition within case function
SELECT ename,sal,CASE WHEN JOB = ‘PRESIDENT’ THEN ‘data-style=”color:green”‘
WHEN JOB = ‘CLERK’ AND sal <= 3000 THEN ‘data-style=”color:orange”‘
WHEN JOB = ‘SALESMAN’ THEN ‘data-style=”color:red”‘
ELSE NULL
END css_style,job FROM emp
Here ‘data-style=”color:green”‘ is the css condition that gives color the the cell.
Note: If you want to change the background color of cell simply alter the statement to
‘data-style=”background-color:green”‘
Step 2 Now go to report column and select the column which you want the color to be applied and
under html expression paste the following code to call the class name for the column.
<span #CSS_STYLE#>#JOB#</span>
Step 3 : Now go to page properties -> Execute when page loads and paste the below code.
apex.jQuery(“span[data-style]”).each(
function()
{
apex.jQuery(this).parent().attr(‘style’, apex.jQuery(this).attr(‘data-style’));
}
);
Step 4 : Now go to page and you can view the report with dynamic color from query
Note : If you give background color like mentioned in Step 1 then your report will be like mentioned below.
