HTML Content - Custom Visual for Power BI

Change Log

Change Log

1.2.1 (2021-07-16)

Submitted to AppSource and awaiting approval.

Bugs Fixed

  • 1.2.0 was using the latest Power BI Visuals API (3.8.0) but some versions of Power BI (e.g. Report Server) haven't caught up yet, so this has been reverted to 3.5.1.

1.2.0 (2021-05-24)

Version currently in AppSource

New Features

Allow Text Select

The Content Formatting menu now includes a Allow Text Select property, which if enabled, will allow users to hightlight text using their mouse. Highlighted text can be copied to the clipboard with Ctrl + C (or system equaivalent).

Note that the visual context menu context and associated logic is specified by the main Power BI window, so it is not possible to use this to copy selected text.

Measure-Based Stylesheet

The Measure-Based Stylesheet property menu allows you to provide a measure that sets the visual stylesheet using conditional formatting, rather than having to manage styling in-line. If you're using Granularity (which uses div elements to separate rows), then this allows you to do things like change the display behavior to create alternate layouts.

If we refer back to one of our examples from earlier, this has one entry per value of [Country], e.g.:

sales-02-country-grain-html.png

The body is contained in a div element with an id value of htmlContent. Each row in the visual dataset is contained within a div element with an assigned class name of htmlViewerEntry.

The CSS selectors for these elements are #htmlContent and .htmlViewerEntry respectively, and (as of 1.2) this can be confirmed by inspecting the raw HTML (using Show Raw HTML property).

For example, to change the flag layout to horizontal, and display a background, we could create a measure like the following:

<CSS> Horizontal Flag = "
#htmlContent {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.htmlViewerEntry {
width: 100px;
margin: 5px;
padding: 5px;
background-color: #eaeaea;
}"

...and add this to the Measure-Based Stylesheet property in the properties pane using conditional formatting and achieve the following result:

stylesheet-flex-based-layout-example.png

If we use the Show Raw HTML property, the stylesheet and output are combined for debugging, or to copy/paste elsewhere, e.g.:

<style id="visualUserStylesheet" name="visualUserStylesheet" type="text/css">
#htmlContent {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.htmlViewerEntry {
width: 100px;
margin: 5px;
padding: 5px;
background-color: #eaeaea;
}
</style>
<div id="htmlContent">
<div class="htmlViewerEntry">
<div><img src="https://www.countryflags.io/CA/flat/24.png"> <b>$24,887,655</b></div>
</div>
<div class="htmlViewerEntry">
<div><img src="https://www.countryflags.io/FR/flat/24.png"> <b>$24,354,172</b></div>
</div>
<div class="htmlViewerEntry">
<div><img src="https://www.countryflags.io/DE/flat/24.png"> <b>$23,505,341</b></div>
</div>
<div class="htmlViewerEntry">
<div><img src="https://www.countryflags.io/MX/flat/24.png"> <b>$20,949,352</b></div>
</div>
<div class="htmlViewerEntry">
<div><img src="https://www.countryflags.io/US/flat/24.png"> <b>$25,029,830</b></div>
</div>
</div>

If using the Measure-Based Stylesheet property, the styling options in the Content Formatting menu are disabled and not applied to your output, so as to give you more explicit control and avoid potential conflicts that might be applied.

Minor Enhancements

Show Raw HTML

If the Show Raw HTML property is enabled, HTML is now displayed in a read only textarea element, e.g.:

updated_raw_html.png

This is scrollable, and it is possible to select text and copy to the clipboard with Ctrl + C (or your system's assigned shortcut).

The raw HTML will also include the div used to encapsulate all body content, and the div used to encapsulate individual rows from the visual dataset, which may also help with identifying how the DOM is structured, and for identifying CSS selectors for standard elements.

If a stylesheet has been assigned via a measure (as detailed above), the resolved CSS will also be included in a style tag.

1.1.0 (2021-01-05)

Minor Enhancements

"No Data" Message

Previously, the message displayed if there was no data available was hard-coded. The visual has now been modified to expose a "No Data" Message property:

issue_26_property.png

You are able to now type in a different message, e.g.:

issue_26_simple_text.png

The property has also been enabled to make use of conditional formatting. If you so wish, you could use a measure containing HTML-based formatting instead, e.g.:

<HTML> No Data = "
<hr/>
<img
src='https://i.imgur.com/Oh2fT96.png'
width='150'
style='align: center'
/>
<hr/>"

issue_26_conditional.png

Default Title No Longer Used

When creating a new instance of the visual, the title will no longer be shown be default (like for the table visual). This can be enabled or modified in the usual way in the properties pane.

1.0.2 (2020-08-28)

Minor Enhancements

Sorting

The visual would previously sort in the value order supplied from Power BI (typically alphabetically).

Standard sorting has been added to the visual, which is accessible from the visual header in the usual way, and will now permit you to sort by any measures or columns added to the visual's fields.

For example, if we have a visual that contains Granularity for Country, and measure that generates HTML to render the flag, total sales, and a sparkline of sales over time, there's quite a lot going on here. Power BI would sort it based on the query result, which would likely be by the Granularity field order (i.e. Canada first, USA last):

issue_11_prior_sorting.png

Now, we could specify that we sort by the Country in reverse order by choosing the standard sorting options in the visual header, e.g.:

issue_11_simple_sorting_by_country.gif

But what if we want to sort by total sales?

As there is an existing row context for Country, we can add our \$ Sales measure to the Granularity field. This will resolve to the same value that's displayed in our HTML measure, and because it's in the visual's data we can sort by it, e.g.:

issue_11_adding_sort_measure.gif

Because values in the Granularity field are used to generate row context for the visual and do not get rendered, you may need to consider what happens to your HTML by adding columns or measures to this field, but this should provide a pretty decent level of flexibility here.

List Items

The visual would not render ordered (<ol/>) or unordered (<ul/>) line item (<li/>) elements due to styling applied higher up in the custom visual host container. This has been resolved to work as expected, e.g.:

html_country_flag_column.png

1.0.1 (2020-07-28)

Initial version released to the Power BI Marketplace.