Oracle Apex: Display Icon in Column of an Interactive Report

This Oracle Apex tutorial shows you, how to display an icon in the column of an interactive report.

The following is the table used in the example for an interactive report.

CREATE TABLE  "EMP" 
   (	"EMPNO" NUMBER, 
	"ENAME" VARCHAR2(100), 
	"SAL" NUMBER, 
	"MGRNO" NUMBER(*,0), 
	"HIREDATE" DATE, 
	"DEPTNO" NUMBER(*,0), 
	"RESIGNED" VARCHAR2(1) DEFAULT 'N'
   )
/

There is a column RESIGNED in the above EMP table, for which we will use the Check icon (✓) if resigned and Cross icon (✗) if not, as shown in the below image:

Display tick and cross icon in Apex report.

 

Follow these steps to create an interactive report with the icon column:

Display Icon in Column of an Interactive Report in Oracle Apex

1. Create an interactive report with the following query:

select EMPNO,
       ENAME,
       SAL,
       MGRNO,
       HIREDATE,
       DEPTNO,
       RESIGNED,
       DECODE(NVL(RESIGNED, 'N'), 'Y', 'fa fa-check-circle', 'fa fa-times-circle') icon,
       DECODE(NVL(RESIGNED, 'N'), 'Y', 'green', 'red') icon_color
  from EMP

I have added two more columns in the above query, one is ICON and the second is ICON_COLOR using the DECODE function. If the RESIGNED column value is Y then it will show ‘fa fa-check-circle‘ icon and if N then the ‘fa fa-times-circle‘ icon.

2. Now make the columns ICON and ICON_COLOR as HIDDEN for the report.

3. Then click on the column RESIGNED and in the Column Formatting > HTML Expression, add the following HTML expression:

<span class="#ICON#" style="color: #ICON_COLOR#"></span>

Here we are using our columns ICON and ICON_COLOR to display instead of the RESIGNED column value.

Below is the image for your reference:

Display icon for a column in interactive report in Oracle Apex.

Save the changes and run the report. You will have the following output:

Oracle Apex interactive report output with icon.

If you want to include column value with icon, then use the following HTML Expressions:

To show column value with icon color:

<span class="#ICON#" style="color: #ICON_COLOR#"> #RESIGNED#</span>

Without icon color:

<span class="#ICON#" style="color: #ICON_COLOR#"></span> #RESIGNED#

See also:

Vinish Kapoor
Vinish Kapoor

Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

Related Posts

One comment

  1. This is useful when we have to only display the icon based on the saved data but when icon should also get changed based on other column’s value, when we edit the other column in the report without submitting the page.in this scenario could you suggest me how we can handle this.

Comments are closed.