28 July 2014

APEX 5: Using Font Awesome Icons in Report

APEX 5 is currently in Early Adaptor 2, so the exact implementation of this blogpost might change when APEX 5 goes GA.
Font Awesome is standard included with APEX 5 and you can use the icons on buttons, there is a special property for that.
I was playing around the other day and I wanted to include some Font Awesome icons in my report.
First create a report (classic or interactive, whatever you want) and use the following query:
select empno
      ,case mod (rownum, 2)
       when 0 then 'male'
       when 1 then 'female'
       end gender
      ,ename
      ,job
  from emp
Because the EMP table doesn't have a gender column, I decided to create one using a CASE statement. Some are "male" and some are "female".
Navigate to the GENDER column.
With the GENDER column highlighted, move your attention to the right side of the Page Designer and focus on the Properties panel.
In the section labelled "Column Formatting", enter the following for "HTML Expression":
<span class="t-Icon fa-#GENDER#"></span>
The names of the font awesome icons always start with "fa-", so this is prefixed to the content of the GENDER column. The result of a "female"-rows will be
<span class="t-Icon fa-female"></span>
For "male"-rows it will be
<span class="t-Icon fa-male"></span>

And that's it.
The report will look like the screenshot below. As you can see there are icons for the males and the females in the EMP table.

32 comments:

  1. NICE! I used this for fa-lock/fa-unlock. Thank you

    ReplyDelete
  2. Excellent stuff, Alex, as usual. Is there anywhere an overview of all available fontAwesome icons that are available within APEX 5.0, please?

    Good luck!

    ReplyDelete
    Replies
    1. You can always refer to the FontAwesome Icon set: http://fortawesome.github.io/Font-Awesome/icons/

      Delete
    2. By the way..., your example is used in a Report, I presume. I am trying to do something similar in a DML Form, but for items on a DML Form there is no section "Column Formatting".
      When I use the Pre Text and Post Text settings, to enter the spans like you define, these values are rendered in the wrong place. If you have any advice, that would be appreciated. Thanks a lot!

      Delete
    3. Yes, it is used in a Report (hence the title of the post ;) ).
      What is it that you want to achieve? Perhaps something like the Star-Rating plugin? https://apex.oracle.com/pls/apex/f?p=654321:201::::::

      Delete
    4. I missed that (the Report header)! :-)
      I wanted to achieve that rather than mentioning Male or Female a fontAwesome icon would display stating the person's gender.
      Meanwhile I have defined two buttons, called Male and Female. Depending on the value of the GENDER column, which I created new as part of the EMP table, it will conditionally display the Male or Female button. Thanks for your inspiration, Alex.

      Delete
  3. Hi,

    Is there a way, how you can create link in report with custom awesome icon? For example put #ICON# (from report definition) into Link Text attribute?

    Thanks.

    David

    ReplyDelete
    Replies
    1. Yes, you can. Add an anchor-tag to the HTML-expression:
      <a href="f?p=93347:1"><span class="t-Icon fa-#GENDER#"></span></a>

      Delete
  4. Thanks for your answer, maybe I mistekenly wrote my question, let's suppose that whole HTML expression is in #ICON#, because sometimes I need to omit the link in report (in times when user don't have permission). Oracle APEX escape the HTML expression. Is there a way how to do it?

    ReplyDelete
    Replies
    1. You could use a CASE expression in the SQL-statement to show/hide the value for that column. Or maybe create an example on apex.oracle.com, so I can see what's going on?

      Delete
  5. Hi Alex!

    I have a report with a few columns containg Y/N values. I would like to have some icons representing the values, such as a checkmark and a cross. So, I found this article explaining what to do, but for some reason I haven't been able to implement it (https://ruepprich.wordpress.com/2016/07/25/display-checkmarks-for-yes-values-in-apex-report/).
    I uploaded a CSS file containing the two classes in the application static files and then used the HTML expression as shown. However, my results are that the column simply appears empty for values.

    Do you have any idea of what I'm doing wrong or an alternate way of doing the same thing?

    Thanks in advance!

    /Jonathan

    ReplyDelete
    Replies
    1. If you're using APEX 5, Font Awesome is automatically included so there is no need to upload any CSS.
      In the blogpost above you can see how to use Font Awesome icons for the column values

      Delete
    2. I tried it in both ways. I even tried to implement exactly what you did in this guide. However, I still have nothing but empty records...

      Delete
    3. Do you have any idea of what the problem is?

      Delete
    4. Did you create your example on apex.oracle.com? So I could look "over your shoulder" and see what going on.

      Delete
    5. No, I haven't - and I don't know if I'm even allowed to since I work for a big corporation. But I get that it's hard to help without actually seeing the issue, but thanks though.
      Now I managed to actually show some icons in my report by hardcoding the alias in the HTML expression. But when I use the ## reference to the column name, nothing works. And since the icon selection are conditional in my case, hardcoding isn't sufficient.

      Delete
    6. Alright, so what are the values in your column? Does the name correspond to a Font Awesome icon?

      Delete
    7. I have made a case when statement giving the original values Y/N the corresponding values check/times, which refer to the icons check and times. The check/times values are shown as expected in the report without the HTML expression, but when I add the HTML expression, which in my case is this http://fontawesome.io/icon/times/, where "times" are replaced with #ACTIVE# (which is my column name), only one of the icons are being shown (in my case the checkmark) and thus not corresponding to the values of the columns. It should be varying between checkmarks and the times/close icon.

      I hope it makes sense.

      Delete
    8. So, you've got this:
      case col
      when 'Y'
      then 'check'
      when 'N'
      then 'times'
      end as active

      &ltl;span class="t-Icon fa-#ACTIVE#"></span>

      And one icon shows up, while the other doesn't? Try a different icon name, perhaps it's not in the version of FA that is used by your version of APEX

      Delete
    9. It works now! I did a typo in the referencing... I apologize for that. But your post and responds still give me a lot, so thank you a lot for taking the time, I really appreciate it!
      Good weekend to you!

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Hi Alex

    I am a newbee to APEX and trying to implement an icon on one of the column of a classic report. But the icon does not come up. Any help is appreciated.

    I have a link on the same column and I want to display an icon
    "icon-comment-alt" , not sure where to place the name of the icon.

    "span class="fa" style="color: green;"/span " - I have placed this under Link Attributes. Using Apex 5.1.1. Can you please throw some light on this.

    Thanks
    Rads

    ReplyDelete
    Replies
    1. Why not use the Font Awesome icons? If you enter the following in the link text, you should be able to see an icon:
      <span class="fa fa-comment-o"></span>

      Delete
    2. Of course I meant Font APEX, not Font Awesome :)

      Delete
    3. Kool awesome !! Thanks a lot, it worked.

      Delete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Hi Alex

    Do you have any ideas of implementing "Star Rating" feature as in Amazon Website, in a classic APEX Report?

    ReplyDelete
    Replies
    1. Report suggests: read only data - Star Rating might imply data-entry; those are conflicting things... anyway: there is a plug-in in the Sample GeoLocation Showcase that you could use.

      Delete