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:

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:

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

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:

• Oracle Apex: Download CSV from Interactive Report from Another Page
• Oracle Apex: Highlight Row on Link Click of Interactive Report
• Oracle Apex: Set Page Items Value Using JavaScript on the Click of a Link in Interactive Report