Displaying icons with data in a column in Oracle APEX Interactive Report (Icon View)

Question

I am trying to create an Interactive Report in an Oracle APEX application. I want to show icons along with the data in a report column.

I succeeded to display the icons, but I want to display these icons in different colors depending on the word.

I found an example of this in the "Universal Theme Sample Application" application that came with Oracle APEX and I applied the same method in my own application.

But in my application all the icons are just black, although in the example application each data is displayed with different color icons.

Can anyone help me with this?

This one is the sample application: Sample Application Screenshot

and this one is my app: My Application Screenshot

Thanks a lot.

Answer 1

You can add color to your icon by adding color css in the Style attribute of your span like this:

<span class="fa #STATUS_ICON#" style="color: green;"></span> #STATUS#

and for the link:

<div class="dm-IRR-icon"> <span class="fa #STATUS_ICON#" style="color: red;"></span> <span class="dm-IRR-iconLabel">#TASK_NAME#</span> </div>

You can also make the icon bigger or smaller by adding in the style the font-size attribute like this: style="color: green; font-size: 15px;"

Edit1: To have different color you have 2 options:

I. Add a new column (icon_color named in my example) in your sql query to bring the color and use it in the HTML Expresion.

SELECT task_name,
  start_date,
  status,
  CASE status
    WHEN 'Open' THEN 'fa-clock-o is-open'
    WHEN 'Closed' THEN 'fa-check-circle is-closed'
    WHEN 'On-Hold' THEN 'fa-exclamation-circle is-holding'
    WHEN 'Pending' THEN 'fa-exclamation-triangle is-pending'
  END status_icon,
  CASE status
    WHEN 'Open' THEN 'red'
    WHEN 'Closed' THEN 'green'
    WHEN 'On-Hold' THEN 'pink'
    WHEN 'Pending' THEN 'orange'
  END icon_color,
  assigned_to
FROM eba_ut_chart_tasks
ORDER BY 2

HTML Expression:<span class="fa #STATUS_ICON#" style="color: #ICON_COLOR#"></span> #STATUS#

II. Add all the logic inside 1 case in your query like this:

SELECT task_name,
  start_date,
  '<span class="fa '||
  CASE status
    WHEN 'Open' THEN 'fa-clock-o is-open" style="color:red'
    WHEN 'Closed' THEN 'fa-check-circle is-closed" style="color:green'
    WHEN 'On-Hold' THEN 'fa-exclamation-circle is-holding" style="color:blue'
    WHEN 'Pending' THEN 'fa-exclamation-triangle is-pending" style="color:pink'
  END ||' "></span>'||status as status,
  assigned_to
FROM eba_ut_chart_tasks
ORDER BY 2;

For this option don't forget to go on your column (Status in this case) and set the Escape special characters atribute to NO.