Using the Paradigm BI HTML Viewer

The Paradigm BI HTML Viewer for Power BI, ParaHtmlViewer, is now available from the store Business Apps – Microsoft AppSource. This visual is not certified, it uses vanilla HTML which can access stylesheets from CDN locations and images from URLs. There is a video on YouTube: Using the Paradigm BI Html Viewer in Power BI https://youtu.be/8dJEEF8QJwQ

This is a single Card HTML Viewer which can display Power BI Data, accept input and submit a form to a URL

This visual will display HTML loaded from a dataset, Data can be bound to the HTML using the Id attribute to most HTML tags including images. HTML should not include any javascript as this will not be processed, CSS style sheets from a CDN will be processed and the sample contains a form using PureCSS. As a single card, the visual requires a category to provide context, measures which have the same name as Id's will be bound to the card. SVG is supported and an Id in a text tag will bind data. This visual can be used to create unique tooltips pages. Forms can be submitted to a target URL, Power Automate is the recommended target.

You can download the sample file when you download the visual from appsource

This viewer loads its HTML from the data set, it's is up to you how you do this, but I have been loading this static data from an Azure Storage Blob using a simple Power Query statement:

let
    Source = Lines.ToText(
        Lines.FromBinary(
            AzureStorage.BlobContents(HtmlUrlPath)))
in
    Source

Where HtmlUrlPath is a PowerBI parameter

In the sample file, there's a longer query where I grab a whole folder of files, which you may find useful. I've generally been using a publicly accessible container for these files, you may require a higher level of privacy. 

Binding data to the HTML is fairly simple, just place an 'id' on a tag where you wish the measure to appear, I generally use a <p> tag for display, if doing data input do it like this 

<input type="text" id="message" placeholder="Enter something here..." />
for SVG use the the <text> tag:
<text style="fill: rgb(51, 51, 51); font-family: Roboto; font-size: 21.6px; text-anchor: middle; white-space: pre;" x="53" y="62" id="result">80%</text>
I created that with Boxy SVG and then just added 'id=result' so that I could bind to the field and replace the 80% with my own measure.
 
Here's an image tag:
<img id="myImage" width="280" height="400">
 That's all pretty simple, just use the id.
 
It's important to realise that there is no javascript allowed, it just gets ignored, but CSS styles are fine, I like PureCSS for forms you can introduce it in the header like this:
<head>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">  
  </head>
This will grab it from the CDN, you can find out how to use it at Pure (purecss.io)
 
There's more on how to get started in the video plus some explanation of the demo application.
Feel free to get in touch if you have any questions.
 
 
 
 
 
Comments are closed