Introduction

This is a quick post to show you how to display different-colored icons in the nodes of an APEX Tree Region. This is one of those things that should be easier than it is!

Goal

I am building an App to maintain corporate hierarchies. These could be cost center hierarchies, job hierarchies, etc. A key piece of functionality is the ability to upload changes to the hierarchies via Excel and provide a Diff between the original hierarchy and the newly uploaded hierarchy. The diff should show:

• Added Nodes (node added to the hierarchy)

• Removed Nodes (node removed from the hierarchy)

• Moved Nodes (node moved from one parent to another)

The UI needs to show changes in the hierarchy and clearly distinguish between the above changes.

The Solution Part 1

Clearly, an APEX Tree region would be a great choice to illustrate changes to the hierarchy. Using the Oracle CONNECT BY clause, we can construct a hierarchical query that compares the hierarchy in the main table to the hierarchy being uploaded. We will skip the diff logic, but you can see the SQL here if you are interested.

In APEX, we set up a Tree Region and reference the columns in the outer SQL:

We end up with something like this:

This looks great, but for larger hierarchies, it will be challenging for users to spot changes to the newly uploaded hierarchy.

Ideally, we could do something like this in the CASE statement, which determines the icon:

  ,      CASE status
           WHEN 'Added'   THEN 'fa-plus-circle u-success-text'
           WHEN 'Removed' THEN 'fa-times-circle u-danger-text'
           WHEN 'Moved'   THEN 'fa-arrows-alt u-info-text'
           WHEN 'Changed' THEN 'fa-exchange u-info-text'
           ELSE 'fa-circle-o'
         END AS icon_css

• The icon_css column above is referenced in the APEX Tree Region Attribute called ‘Icon CSS Class Column’. Navigation: Tree → Attributes → Appearance → Icon CSS Class Column.

Unfortunately, this does not work. If we inspect the HTML and CSS in the page, we can see why:

• Even though we see the u-success-text class that we added, APEX is using a CSS variable --a-treeview-node-icon-color to determine the icon color. We could, of course, override that color, but the override would apply to all nodes, and we are back where we started.

The Solution Part 2

Ideally, APEX would allow you to pass your own color class in the SQL like this:

  ,      CASE status
           WHEN 'Added'   THEN 'fa-plus-circle icon-green'
           WHEN 'Removed' THEN 'fa-times-circle icon-red'
           WHEN 'Moved'   THEN 'fa-arrows-alt icon-blue'
           WHEN 'Changed' THEN 'fa-exchange icon-blue'
           ELSE 'fa-circle-o icon-grey'
         END AS icon_css

On the page level, Inline CSS, we would style the above color class.

Unfortunately, this does not work either, as the APEX class overrides ours.

The Solution - Part 3

We can work with APEX and set the --a-treeview-node-icon-color CSS variables based on our own custom CSS classes. Add the following to the page level Inline CSS attribute. Page → CSS → Inline (or Theme → Custom CSS if you want it app-wide).

.a-TreeView .fa.icon-green,
.a-TreeView .a-Icon.icon-green,
.a-TreeView .t-Icon.icon-green { --a-treeview-node-icon-color: var(--ut-palette-success); }

.a-TreeView .fa.icon-red,
.a-TreeView .a-Icon.icon-red,
.a-TreeView .t-Icon.icon-red { --a-treeview-node-icon-color: var(--ut-palette-danger); }

.a-TreeView .fa.icon-blue,
.a-TreeView .a-Icon.icon-blue,
.a-TreeView .t-Icon.icon-blue { --a-treeview-node-icon-color: var(--ut-palette-info); }

.a-TreeView .fa.icon-grey,
.a-TreeView .a-Icon.icon-grey,
.a-TreeView .t-Icon.icon-grey { --a-treeview-node-icon-color: var(--u-color-29);}

Add the custom CSS classes icon-grey, icon-blue, icon-green, and icon-red to our SQL, along with the icon classes.

,      CASE status
           WHEN 'Added'   THEN 'fa-plus-circle icon-green'
           WHEN 'Removed' THEN 'fa-times-circle icon-red'
           WHEN 'Moved'   THEN 'fa-arrows-alt icon-blue'
           WHEN 'Changed' THEN 'fa-exchange icon-blue'
           ELSE 'fa-circle-o icon-grey'
         END AS icon_css

If we take a look at the HTML and CSS generated in the page now, we can see the UT u-success-green color class has been used in the --a-treeview-node-icon-color CSS variable for the specific node.

The result is colorized node icons, which make it easier to see what is being added, removed, or moved:

Conclusion

I could have written this post with just the solution, but I thought it would be useful to see my thought process in solving this problem.

📣 Call to Action

I have created an Idea in the APEX Ideas App, suggesting it would be easier to pass a color class along with the icon class. Unfortunately, the idea has been closed 😞