Oracle APEX: Changing Heading Colors for Interactive Report

Humans are visual creatures and it is often helpful to communicate information through color. Use this tutorial to change your APEX interactive report heading colors.

First lets understand how we can identify the headers of an Interactive Report. APEX needs column heading to be identifiable for accessibility and as such generates unique IDs which look something like this: C187979672321729945. I don’t know about you but I have a hard time understanding what that id relates to… so lets make our report columns a bit more identifiable to us humans and add some color.

This is what the report and HTML look like by default:

Here is what we need to accomplish:

1. Change the column heading to an ID we can understand
2. Add CSS to the page which styles the ID as we need

Change the column heading to an ID we can understand

In order to assign a more appropriate ID to the ENAME column lets modify the ENAME column Static ID property to irEname

Add CSS to change the column heading styles

CSS

#irEname { background-color: lightgrey; }
#irEname a {  color: tomato; }

 

Add custom CSS to a single page by modifying the Inline page property

The final styled column heading:

Closing Thoughts

Always be careful when deciding to alter the default behavior of APEX. Often times when adding styles there are unintended side-effects as well as potential blocking issues when it comes time to upgrade. Just remember the APEX team has spent countless hours making sure their default styles work well in all viewports and you should do the same! That said, changing color is a pretty simple change that wont cause unintended issues…usually. Happy coding!

See all of Tyson’s APEX Trainings