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
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_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#