Debbie Hagen

How can I use conditional logic in an HTML component to change properties of the font?

Blog Post created by Debbie Hagen Employee on Dec 2, 2015

In our reporting classes, we make a point of telling you that if you're going to be creating a lot of custom reports, it's a really good idea to learn HTML or at least make friends with someone who knows HTML .   One of the things you can do with dynamic HTML is dynamically change the information on in your HTML component based on meeting certain conditions.


In this blog post I'll give you an example of how you can use conditional logic to change the font color in your HTML by including a function in your code.


Consider this example:

Suppose you are looking at a report that contains a KPI for Budget Remaining and you want to add an HTML component that alerts viewers when the Budget Remaining becomes a negative number... in other words you want the font to turn red when you have no budget remaining and are in deficit.


Start by adding an HTML component to your report.  You'll need to ensure that the value you want to display, Budget Remaining, is in the Values area of the HTML Configuration dialog.  This gives the HTML component the context it needs to access the Budget Remaining values.

Next, open the HTML editor and add the HTML Code to display the budget remaining value.


This displays the budget remaining value for your storage:

Now, suppose you'd like to take it a step farther so that the Budget Remaining value shows in Red font if the value becomes a negative number. You simply modify your code to include the NumberFormat function.  The NumberFormat function is used to convert numbers to a specified format.  The syntax for the NumberFormat function is:




in other words, first you tell it what to do if the value is positive, then what to do if the value is negative.  You'll add HTML code that does this:

"<font color='black'>  $#,###</font>;<font color='red'>($#,###)</font>"


Here is how it would look in the HTML editor:



Now, in October, when we still have Budget Dollars remaining the Component looks like this:

But when you move to December, where we no longer have Budget Remaining, and have spent more than was budgeted, the number shows in Red.


If you'd like to make your component even more dynamic, you could add code to reference a filter or selected slicer.  For example:


This screen shot shows an HTML Component that displays the Budget Remaining value for the specific location selected in the slicer.  Below is the code to display this:


I hope this has been helpful.  Thanks for learning with Apptio University!


Debbie Hagen