Requirement: I have an EMP data displayed in an Interactive Report in Oracle APEX as shown below:
Now, my requirement is to highlight all those rows as yellow and also the color of the text as red, where the SALARY is less than or equal to 14500, as shown below:
Environment Setup: Let us first create an EMP table by using the below CREATE Table statement.
CREATE TABLE emp (
emp_id NUMBER PRIMARY KEY,
name VARCHAR2(20),
salary NUMBER
);
Insert few records using the below INSERT statements:
INSERT INTO emp(emp_id,name,salary) VALUES(1,'Susanto',10000);
INSERT INTO emp(emp_id,name,salary) VALUES(2,'Moumita',20000);
INSERT INTO emp(emp_id,name,salary) VALUES(3,'Shivansh',15000);
INSERT INTO emp(emp_id,name,salary) VALUES(4,'Anjali',13000);
INSERT INTO emp(emp_id,name,salary) VALUES(5,'Shuhansh',14500);
INSERT INTO emp(emp_id,name,salary) VALUES(6,'Subrata',15600);
Solution: For solution of the above requirement follow the steps as shown below:
Step 1: We will assume that we already have the Interactive Report displaying the EMP data created. Now, when we ran the application, we will have the EMP Interactive Report displayed as shown below:
Step 2: Click on the Actions > Format > Highlight
The following dialog will open, then specify the condition and settings according to your requirement.
Here, we will provide the values a shown below:
- The Name as Salary Check
- Select the Highlight Drop Down as Row
- Set Background Color as Yellow (#FFFF99)
- Set the Text Color as Red (#FF7755)
- Select the Condition Type as Column
- Select the Column as Salary
- Select the Operator as less than or equals
- Set the Value as 14500
Then, click on the Save button.
Step 3: As soon as we clicked on the Save button we can see, that all the rows where the Salary value is less than or equals to 14500 are highlighted in Yellow and also the Text Color for those rows are in Red.
One more extra thing we can see is the condition name displayed with a Star icon, and a close button as highlighted above with a red box. When we clicked on the Close button the Report Highlight Condition will also get removed.
Step 4: Now, if we do not want to show the Report Highlight Condition box above the report, we can use a CSS tricks. For that, let us go to the Interactive Grid in the APEX Developer instance (APEX Page Designer) > Select the Report (Highlight Rows Conditionally) > Set Static ID as empDetail > Click Save
Step 5: Now, add the below CSS code in the Inline CSS Section of the Page.
#empDetail_ig_report_settings{
display: none;
}
Now, our report will be displayed without the Report Highlight Condition box, as shown below.
Now, this Report with all the Row Highlighting is only visible to the Developer. To make this Interactive Report changes permanent and visible to every users, we need to Save this Report for which we have to Click on Action Menu > Report > Save
Hence, the solution to our requirement.
If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.
Thanks & Regards,
Susanto Paul
2,862 total views, 13 views today