# Color Icons in APEX Tree Regions

# 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](https://gist.github.com/jon-dixon/be35be00523935e8c9adec5607491bf3) if you are interested.

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

![APEX Tree Region Settings](https://cdn.hashnode.com/res/hashnode/image/upload/v1762124926847/c51d0913-dd5d-4ebe-ad1f-9f873d9a77d3.png align="center")

We end up with something like this:

![Oracle APEX Tree Region No Color](https://cdn.hashnode.com/res/hashnode/image/upload/v1762124570181/b3b19b5c-d0e9-43b4-9fa0-07045dfc5e34.png align="center")

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

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Now to the point of this blog post, how to change the colors of the icons in the tree?</div>
</div>

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

```sql
  ,      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:

![APEX Tree Region CSS](https://cdn.hashnode.com/res/hashnode/image/upload/v1762125533022/65471fd3-109c-4541-bf97-a569a50e4775.png align="center")

* 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:

```sql
  ,      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.

![Page Level CSS](https://cdn.hashnode.com/res/hashnode/image/upload/v1762125853294/84330afc-9d60-4cf2-ba92-4315e734080c.png align="center")

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

# The Solution - Part 3

<div data-node-type="callout">
<div data-node-type="callout-emoji">😠</div>
<div data-node-type="callout-text">OK, enough about what won’t work… What will work?</div>
</div>

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).

```css
.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.

```sql
,      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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1762126335824/57a0b39f-c21e-413f-bc6a-42b94e7ffbc7.png align="center")

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

![APEX Tree Region with colored Node Icons](https://cdn.hashnode.com/res/hashnode/image/upload/v1762126367536/33a681f3-f6f9-4550-98e3-453e613a2247.png align="center")

# 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](https://apex.oracle.com/ideas/FR-4704), suggesting it would be easier to pass a color class along with the icon class. Unfortunately, the idea has been closed 😞