Building a Font APEX LOV

Ever wanted to give the end user the ability to pick from Font APEX’s great set of icons?

As part of the Customer Experience it is sometimes nice to give the user control over the icons that are displayed to access certain options. As developers we can simply add a text field where the use can enter the Font APEX class name but this isn’t really a great user experience. Wouldn’t it be easier to give them an LOV where they can choose their icons from the full list supplied and also see the icon displayed.

What I also want to do is use Oracle APEX out-of-the-box functionality, i.e. no Javascript, no plugins.

First you need to get the list of the Font APEX icons.  I would recommended that you go straight to the Font APEX GitHub page:

https://oracle.github.io/font-apex/

Select all the contents from the page and paste into a text editor of your choice.

Remove the spurious text from the top and bottom of the text file, add a line as a heading at the top of the page using “Icon Name”, and save the file

You now have a list of all the Font APEX icons and their groupings.

We are now going to load these into your database.  As ever APEX provides the easiest way of doing this by providing the Data Workshop.

In your APEX Builder navigate to SQL Workshop -> Utilities -> Data Workshop and click on “Load Data”

Either select your file or paste in the list of Font APEX icons.

Add a table name as FONT_APEX_ICONS, and in Settings ensure that “First Line Contains Headers” is switched on.

Click on “Load Data” to create the table and load in the Icon information.

To improve the usability of the list of values that we are going to create, then we are going to group the icons as per the listing on the Font APEX GitHub page.

To do this run the following statements in SQL Commands:

-- Add a new column to support grouping the icons
alter table font_apex_icons
add group_name varchar2(50);
-- Go through the list of fonts and set the group name from the list
declare
  l_group_name font_apex_icons.group_name%type;
  cursor c_f is
    select * from font_apex_icons
    order by id
    for update;
begin
  for r_f in c_f loop
    if r_f.icon_name not like 'fa%' then
      l_group_name := r_f.icon_name;
    end if;
    update font_apex_icons
       set group_name = l_group_name
     where current of c_f;
  end loop;
end;
/
-- Remove the groupings rows that don’t start with 'fa'
delete from font_apex_icons
where icon_name not like 'fa%';

Now we have the data in the database we can go about creating our List of Values

In the APEX Builder, navigate to Shared Components -> List of Values

Create your list of values based on the following SQL Query:

select icon_name r,
       icon_name d,
       group_name g,
       icon_name icon
from   font_apex_icons

Set the following Column Mappings:

  • Return Item = R
  • Display = D
  • Default Sort = D
  • Group = G
  • Icon = ICON

To set the Group you will have to first “Select Columns >” to choose all the items in the SQL statement to be included in the search .  In the Interactive Grid for the columns in the LOV, for column ‘R’, then set “Visible” and “Searchable” both to ‘No’.

Now it is simply a matter of defining a popup LOV field in your page and referencing the Shared Component for you newly created LOV.

APEX neatly displays the icon image next to the icon name and groups the listing as per the GitHub home page.

Your customer can now choose the Font APEX icons they want to use from the list and these can be displayed within the application using the Font APEX class name

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: