Guidance for ParaHtml PowerBI Custom Visual Version 1.0.0, it's a Beta.
This Visual works well on simple HTML pages, it does not process JavaScript within pages and likewise CSS stylesheets.
This Viewer loads an HTML file from a public URL, the URL must be CORS enabled. Failure due to CORS is silent. Current testing has used files in an Azure Storage Blob Container and pages on a website.
Files are loaded and parsed, the BODY element is loaded into the visual everything above that is not used, so don't bother trying.
CSS Styles within the page work as usual, so this is your primary option for styling.
Initial proof-of-concept implementation caters for one category and one measure. There are three processing phases Form, Page and SVG.
The form mode runs first and allocates the Category and Measure names to the "for" attribute in the "label" elements and the values to "value" attribute in the "input" elements. Here's the form. Please note that the 'id' selectors are not functional
This is the form part of the page:
<form>
<label for="category">Category</label><br>
<input type="text" id="category" name="category" value="category"><br>
<label for="measure">Measure</label><br>
<input type="text" id="measure" name="measure" value="measure"><br><br>
<button >Click me</button>
</form>
Which ends up like this:
The Page mode substitutes values to a "Category" and "Measure" class. there are two samples for that, the OKY sample is more decorative.
Here's how the OKR sample page works, it's fairly simple.
<div style="border-radius: 10pt ; border-color:cadetblue; border-width: 5pt; border-style: solid; box-shadow: 5px 10px;">
<h2 style="text-align:center; color:darkblue">My OKR</h2>
<p style="text-align:center;">This months OKR is looking good</p>
<p id="category" title="My OKR" style="text-align:center; font-weight: normal;">OKR
<span class="category" style="font-weight: bold;">category</span> is
<span class="measure" style="font-weight: bold;">measure</span></p>
</div>
Here's that one and a little SVG one too.
SVG is parsing just fine, there's an SVG example. SVG Substitutes the measure into the first Text item in the SVG
Javascript within the HTML using SCRIPT Tags is not executed, not too sure why not too concerned.
At the moment the HTML is loaded every time the visual changes, this may be modified to only load if the setting changes.
The Visual requires a Category and Measure even if they are not used.
The Target works with the form submit button, a JSON Object of the form fields like this: {"Dose":"2","Length":"52.20"} , is sent to the target. This has been tested with Power Automate AKA Flow. I got a CORS related error posting to a Zapier webhook.
Download the Visual from ParaHtml Download
The Github repository is located at https://github.com/MikeAinOz/ParaHtml
The test pages are in the HTML folder of the repository, the pages are also on my test site at https://miketest.com.au/OKRtest.html, if you want to do a quick test you can use this as a Source in the visual, no guarantee those files are current!
Feedback is welcome and encouraged, requests may be implemented, issues will be addressed.