Tuesday, January 06, 2015

Highlight negative numbers in an APEX Report (css only)

Here's a screenshot of the result we want: the negative numbers are highlighted in red.

There're many ways to achieve highlighting certain areas in a report, but depending the complexity of the logic that defines what gets highlighted I use one of the following three techniques:
  1. CSS only
  2. CSS and a Dynamic Action with one line of JQuery
  3. CSS and a column in the SQL query that defines the class
In this post I will explain the first technique, the other two are for future posts.

CSS only solution to highlight a negative number

Create a classic Report (the same technique works for an Interactive Report). Edit the number column(s) you want to turn red in case it's negative and modify the Column Formatting as below.

I'm wrapping a span around my column (AMOUNT) and use the HTML5 data- attribute to store the number in that attribute. Doing this will allow me to use a CSS selector to see if it's a negative number or not. Unlike JQuery, CSS doesn't have a :contains selector, if it did, we didn't have to create the extra data-number attribute.

In the Page Attributes, in the CSS section we add following inline css (note you can add this to your Page Template too, so it works for all pages):

What the CSS is doing: every span with as attribute data-number that contains a - (dash - which means it's a negative number) we give the color red. 

That's it...

You find the online example here: https://www.apexrnd.be/ords/f?p=DGIELIS_BLOG:REPORT_HIGHLIGHT_CSS


Juergen Schuster said...

Love this nice little tricks thanks!

DogWisper1 said...

I've been looking for info on how to use CSS. I don't see the follow up posts for the other two techniques that you indicated in this post. Will you be posting these or can you send me a how to?


Dimitri Gielis said...

Hi Mike,

Thanks for the reminder; you find the post about SQL and Class here: http://dgielis.blogspot.be/2016/01/highlight-numbers-in-apex-report-sql.html

I'll write the JQuery version in the next days too.


Unknown said...

Hi Dimitri

Can you explain how I can made the same task by referencing a CSS in the page template?

I read that I can refer to a CSS file within the page template, I tried, but without success :(



Dimitri Gielis said...

Hi Javier,

In the last screenshot, there's a section File Url's.

In there you can add #APP_IMAGES#name_of_css_file.css and you would upload your CSS file to Shared Components > Application Files (static files)

Hoep that helps,

Unknown said...

Thanks! It's very useful!