IBM Apptio

IBM Apptio

 View Only

Use HTML and CSS to fine-tune report table display 

Thu March 05, 2015 04:36 PM

PROBLEM

You created a report with tables, but you want to modify how they look .

You searched the Ribbon toolbar and the Properties of the table but you didn't find quite what you needed.

 

SOLUTION

Use a combination of HTML and CSS to alter the default display characteristics of report tables.

 

 

EXAMPLE

Assume we have the table shown below.

report_old_001.png

 

 

1. Switch to report editing mode.

2. Click the Project Manager column header to highlight the entire column.

report_old_002.png

 

 

3. On the Ribbon, click: Data > Edit.

report_old_003.png

(Is Edit grayed out and unselectable? Try: Ribbon > Data > Insert > Insert Formula Column and then create a new column whose formula is equal to the old column.)

 

4. In the Enter Formula field, surround the column's existing value with HTML and CSS. For instance, to change this column's text color to green and size to extra large, enter:

="<span style='color:green; font-size:x-large'>"&Projects Master Data.Project Manager&"</span>"

 

 

More about CSS font colors

 

More about CSS font sizes

 

5. Notice the change affects all values in the column.

report_old_004.png







#CostingStandard(CT-Foundation)

Statistics
0 Favorited
2 Views
0 Files
0 Shares
0 Downloads

Comments

Tue November 17, 2020 07:30 AM

I used this in report and it works great with HTML and CSS. The problem I encounter now is that as soon as I use HTML in a table I can't add a drill to the table row. When i delete the HTML and use only the table then the drill works. Anybody have a suggstion how I can use a drill and still color code the table?


#CostingStandard(CT-Foundation)

Wed April 04, 2018 11:41 PM

I like the hint with the "enter a new formula" part, as in my table it's not possible to edit the current one. This was also written in the help document, but I wasn't sure, if it's necessary to add a new column. But as I seen this example, I need to go this way and in the end have the table I want! :-)


#CostingStandard(CT-Foundation)

Tue March 10, 2015 04:23 PM

Tony - one way to preserve the functionality of numeric filters (such as "<0") in the search bar is to move the HTML/CSS formatting code to a different section of the column editor window:

preserve filter.PNG

 

In the example above, the Enter Formula section retains only the mathematical formula.

The formatting code has been moved to the Advanced-type format section.

 

Note that $_ is used in the formatting code as a self-referential placeholder to denote where the formula value should appear.

 

The search bar filter now works normally for numeric values:

2x cost.PNG


#CostingStandard(CT-Foundation)

Mon March 09, 2015 01:42 PM

One thing you can do, if you need to maintain presentability but also want to search and do analysis, is put two columns into the table -- one marked up as Text, and one plain as Numeric (in your example Tony).  In other words, add one synthetically in the data set that is just a copy of the other one.

 

Markup takes effect only on the one column you specified, in the report.  You might hide that plain column before printing or presenting that table, then restore it when you get back to doing your analysis.


#CostingStandard(CT-Foundation)

Mon March 09, 2015 01:31 PM

Excellent point, Tony - adding HTML to a numeric value does come with a couple of caveats:

  1. this can affect the ability to use the HTML-ized number as a drill-down on a report
  2. this can also affect the search-ability of the number, using typical numeric search strings

#CostingStandard(CT-Foundation)

Mon March 09, 2015 01:23 PM

I've found that when I use that type of formatting, I can no longer use the search bar under the table headings. For example, if I wanted to search for all values less than zero using "<0" in the search bar, I get no results.


#CostingStandard(CT-Foundation)

Fri March 06, 2015 11:32 AM

While it's rare that you want a person's name to be highlighted, HTML is tremendously helpful for highlighting negative numbers.  Our Currency() function does some formatting automatically, but sometimes you need a different color or need to make those values bold.

 

For instance:

=NumberFormat (Cost,"#,###;<span style='color:orange'><b>(#,###)</b></span>")

 

Note that the NumberFormat functions better with the older HTML of "<b>" instead of css "font-weight".


#CostingStandard(CT-Foundation)