global19-atlassian-net / pbi-htmldisplay

A simple visual for Power BI that displays HTML handed to it. Perfect for custom formatting output using a measure.

PBI-HTMLDisplay

A simple visual for Power BI that displays HTML handed to it. Perfect for custom formatting output using a measure. Like my banner visual, this was also borne from the need to display text in a larger font than the built-in Card visual allows (40 pt). Due to the problems I was having with the formatting pane in the other visual, this provided a better solution without relying on any formatting pane options.

Usage

There are no special rules for using the visual. It has no settings and only accepts one Measure. Using a custom measure, you can use HTML formatting and strin concatenation (the &) to display a static HTML string, or embed 1 or more fields/summarizations of live data.

Examples

Assuming you have a Date table with a column that contains the Month and Year like "November 2018" called [MonthNameYear] and the daily sales for your company's widgets in the Sales table in the column called [Count], and the two tables are linked by date, you can create the following measure to show the sum of sales for the most recent month (use a relative date filter to filter to the last 1 Calendar Months):

Monthly Sales Card = "
<div style='text-align: center'>
  <div style='font-size: 12px'>Total Sales for</div>
  <div style='font-size: 24px'>" & LASTNONBLANK('Date'[MonthNameYear], 'Date'[MonthNameYear]) & "</div>
  <div style='font-size: 48px; color: Red'>" & FORMAT(SUM('Sales'[Count]), "#,0,") & "K</div>
</div>" 

That will produce the following output (Note that github does not render this correctly, so you will have to imagine that it looks like it's supposed to, or view the Markdown file in another viewer):

Total Sales for

November 2018

280K

With some fancier DAX code, you can probably do tables and maybe even javascript, but I haven't tried that at this point.

Known Bugs and TODOs

None!