Measure formatting (markdown and custom)

In this article, I will show a few tips and tricks on how it is possible to format the measures.

In eazyBI, there are two interesting ways on how to format measures to get a different appearance. First is our newest formatting option, Text->Markdown (available on Cloud and starting from the eazyBI version 6.1), and second is a Custom format with which you can change the formatting of the measure.

Markdown

You can use Markdown formatting to show a rich text (bold, italic) or clickable URL links. Also, you can use HTML for more advanced formatting, e.g., show an icon or image as a measure. As eazyBI uses font-awesome icons, it is possible to refer to them in calculated measures or in report/dashboard description when using markdown formatting. Check out a few examples.

Example 1, Issues resolved (check)

This measure returns for Year level where issues are resolved a green check, which is a bit bigger (increased font size) than checks in below levels where issues also are resolved.

CASE WHEN [Time].CurrentHierarchyMember.Level.Name = "Year" AND 
  [Measures].[Issues resolved] > 0 THEN
    "<i class='far fa-check' style='color:green;font-size:20px'></i>"
  WHEN [Measures].[Issues resolved] > 0 THEN
    "<i class='far fa-check' style='color:green'></i>"
END

Example 2, Revenue (+/-)

This measure returns a green arrow up when revenue is above zero, or a red arrow down when revenue is below zero.

CASE WHEN [Measures].[Revenue] > 0 THEN
    "<i class='far fa-arrow-up' style='color:green'></i>"
  WHEN [Measures].[Revenue] < 0 THEN
    "<i class='far fa-arrow-down' style='color:red'></i>"
END

Example 3, Team icons

This measure returns a different icon for each Project Team.

CASE [Project team].CurrentMember.Name
  WHEN 'Ghost' THEN
'<i class="far fa-ghost" style="color:green;font-size:20px;display:block;text-align: center"></i>'
  WHEN "Astronaut" THEN
'<i class="far fa-rocket" style="color:blue;font-size:20px;display:block;text-align: center"></i>'
  WHEN "Unicorn" THEN
'<i class="far fa-unicorn" style="color:pink;font-size:20px;display:block;text-align: center"></i>'
  WHEN "Robot" THEN
'<i class="far fa-robot" style="color:purple;font-size:20px;display:block;text-align: center"></i>'
END

Example 4, Value in other color

This measure compares two dates. If the first date is greater than the second date, it will show the first date in red color.

CASE WHEN --compare two dates
  DateCompare(
    [Measures].[Actual date],
    [Measures].[Target date]
  ) > 0
THEN --if Actual date > Target date, show Actual date in red
  "<span style='color:red'>" || Format([Measures].[Actual date],'dd mmm yyyy') || "</span>" 
ELSE --if Actual date =< Target Date, show text in green
  "<span style='color:green'>Completed before Target date</span>"
END

Also, a more complex solution is possible, see an example from our demo account.

Where and how to get Icons?

To get an icon code from font-awesome, you need to find an icon you like and copy the code from it.

Note that eazyBI uses only some of those icons, so testing is needed to see if the icon is available from eazyBI.

Also, for Jira Server, you can upload pictures to the server and reference them in your measures. See the instructions here.

Custom

With Custom formatting, you can change the result representation to another. For more details (and string templates), see how to Format string content.

In the example below, you can see how the same measure representation changes using three different custom formatting options:

Revenue 1

$#,##0.00

Revenue 2

$#,##0.00;($#,##0.00)

Revenue 3

$#,##0.00;($#,##0.00);\N\A

Custom formatting can also be used together with the format() function to change the result and create specific formatting. In this case, custom formatting is set as #.

Issue created week

This measure returns the week number and year in which the issue was created.

Format(
  [Measures].[Issue created date],
  '"W"ww, yyyy'
)

4 Likes

In addition, you can use the following formula to align string values at the right side of the cell

"<p style='text-align:right;'>" || "String"
|| " % "  || "<i class='far fa-check' style='color:green'></i>"
|| "</p>"

Martins / eazyBI support

6 Likes

Hello martins,
do you have a list of icons that you have?
For example I need circle, square and triagle “solid”.
I’ve checked the “Circle Icon” application and can be added to my eazyBI Server but firstly I want to check if there are other else icon “embeded” that can help me.
Thanks in advance.

@jmarchal

eazyBI uses almost all regular and light font-awesome icons and it is possible to refer to them in a calculated measure when using markdown formatting, e.g.)

Martins / eazyBI

1 Like

Hello Martins,
what means exactly “almost all regular”?
also “solid”?
I want a traffic light and the regular circle is not solid :slight_smile:
Best regards.

Hi,

it means that eazyBI supports all icons that font-awesome has under two filters “regular” and “light” but we don’t update the library on a daily basis, so that is why I mentioned “almost” in my previous post.
“Soild” filter is not available at the moment, but likely we will add more filters somewhat soon.

Martins / eazyBI

1 Like

Thank you Martins,
This was what I supposed.
Normally, some markdown use is create traffic lights for indicators.
I’ve prepared with circle, triangle and square but “not solid” is not enough clear :slight_smile:
I hope you can improve it soon…
Best regards.

@jmarchal

Good news. We are planning to add more font-awesome filters very soon.
I will post an update in this community post thread once it is changed in eazyBI.

Martins

@jmarchal

All font awesome icons should be available since version 6.2 (expected to be released in the beginning of 2021). If you use eazyBI for Jira Cloud they are available already today.

Martins / eazyBI team

1 Like

We updated font-awesome icons in the cloud and in with version 6.2 for server/data center including icons for traffic lights indicators.

Daina / support@eazybi.com

1 Like

Does exist any live example link?

Here is the report from demo account: Project overview based on Sprints and Story Points - formatted - Issues - Jira Demo - eazyBI

Hi, could you please provide a simple example of using a traffic light for a project?
Maybe based on 3 values (green, yellow, red).
That would be very helpful for me

Thanks,
MK

@MK_Bi

Which Jira app do you use to enter traffic lights for project in Jira?
After a traffic light details is imported for project dimension members, perhaps you can switch to gauge chart and use font awesome icons to show the traffic light for the filtered project.
See an example of gauge chart with “values only” option enabled:
https://eazybi.com/accounts/1000/cubes/Issues/reports/415755-project-overview-based-on-sprints-and-story-points-formatted

Martins / eazyBI support

The link listed below is broken:

"Also, for Jira Server, you can upload pictures to the server and reference them in your measures. See the instructions here .

Can you refer me other documentation that can allow me to leverage custom icons on my local JIRA server?

@JeffLondon

Try “user interface customization” page:
https://docs.eazybi.com/eazybi/set-up-and-administer/customization/user-interface-customization

Martins /eazyBI

Hi,
I am on Cloud.
I am trying to set icons (our of regular icons) and many of them are not displayed on EasyBI. Is there a list of icons supported?
It is very frustrating to select icons and then it does not show 9 out of 10 of the icons I choose.

Hi,
Can you share a few examples that you tried which didn’t work?

eazyBI uses almost all regular and light font-awesome icons and it is possible to refer to them in a calculated measure when using markdown formatting, e.g.)

Martins /eazyBI support

There are many examples. These are just a few:
The first and second works (from your sample) the fa-ghost works.
The others do not work (they display nothing or just a box (see Screenshot)
scr1
scr2

Hi,
When I change the class to “far ” it works!
Does it mention this in the documentation?
The documentation says to copy the code:

Where and how to get Icons?

To get an icon code from font-awesome , you need to find an icon you like and copy the code from it.

Note that eazyBI uses only some of those icons, so testing is needed to see if the icon is available from eazyBI.