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 EMPI 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:
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.