Overview
In this document, we are going to see about how to add customized background color in report cell of interactive Report.This is achieved using CSS and JavaScript.Also,Different method to adding background color is explained in the document.
Technologies and Tools Used
The following technologies have been used to achieve the expected output.
- CSS
- JavaScript
Use Case
In oracle apex, If we want to add customized background color to interactive report like normal background color or Multi color background. Here we are having the below possibilities,
- We can add background color using default method of the interactive report.
- We can add the background color using custom attribute.
- We can add the background color using JavaScript in dynamic action.
This document explains how to achieve this requirement.
Architecture
Following steps explains in detail,
We can add background color using default method of the interactive report.
Step 1:
In the action menu of the report has the option as format.In format we are having option to highlight.First we needs to select highlight.
Step 2:
Once we select the highlight we will redirected to the below screen.here we will have a option to highlight row wise and column wise using highlight type.We can choose the background color and text color and also we can add color based on the condition.
We can add the background color using custom attribute
Step 1:
We have to write the query with column return the color.
Step 2:
We needs to add the below code in the Column formatting in HTML expression.
We can add the background color using JavaScript in dynamic action.
Step 1:
We needs to add static id to column which we are going to use as the condition.
Step 2:
We needs to add After Refresh dynamic action to region which we want to add the color.
Step 3:
We needs to add below JavaScript in the dynamic action.Also, we want to enable the Fire on initialization option.
$(‘td[headers=”EMPNO”]’).each(function() {
if ( $(this).text() == ‘100’ ) {
$(this).closest(‘tr’).find(‘td’).css({“background-color”:”grey”,”color”:”black”});
}
});
Screen Shot
Output:
By using above three methods we can add the colors as below.
