HTML & DAX & CSS

[alanvicsansz]

Good evening, everyone!

I’d like to replicate in Power BI the same output shown in the image on the right to my HTML Content visual on the left. How can I do this?

Download the dataset: [click here]

[FarhanJeelani]

Hi @alanvicsansz ,

Indeed, while you can reproduce the nice XML output in the HTML Content visual, you must do it with an HTML string (with inline CSS) that formats the XML. Power BI does not render XML files with highlighted syntax, so highlighted HTML must be generated and passed to the visual.

What to do?

Obtain the XML Content visual and bind it to a measure (or a column that contains HTML).

Create a DAX measure that returns an XML block, inline styles to color parts like tags, attributes, values, with line breaks and indentations.

In the code part, the angle brackets should be escaped so they can display as text, but inline styles can still apply to portions of the text.

Example you can adapt

Create a measure like this (adapt to your XML structure; quotes in string literal are escaped with ""):

XML_Highlight_HTML := "

<div style='font-family:Consolas,monospace; font-size:12px; line-height:1.4; background:#f7f7f9; padding:6px; border:1px solid #dbe6ee; border-radius:4px;'> <span style='color:#2B91AF'>&lt;?xml version=""1.0"" encoding=""UTF-8""?&gt;</span><br/> <span style='color:#1A5A9A'>&lt;Notas&gt;</span><br/> &nbsp;&nbsp;<span style='color:#1A5A9A'>&lt;Nota</span> <span style='color:#A31545'>id=""1""</span><span style='color:#1A5A9A'>&gt;</span><br/> &nbsp;&nbsp;&nbsp;&nbsp;<span style='color:#1A5A9A'>&lt;Data&gt;</span>2021-07-01<span style='color:#1A5A9A'>&lt;/Data&gt;</span><br/> &nbsp;&nbsp;&lt;/Nota&gt;<br/> &lt;/Notas&gt; </div> "

Notes:

The HTML uses inline CSS for colors. It uses <br/> for line breaks and for indentation.
The angle brackets in the code are shown by escaping them as < and >. The inner tags in the code are colorized with <span> wrappers, so you get syntax-like highlighting.
If your XML comes from a column, you can build the same HTML by concatenating parts in DAX (substitute the dynamic parts in the appropriate places).

Steps to implement in your report:

Install the HTML Content visual (AppSource) if you haven’t already.
Create a DAX measure like the example above, replacing the static XML with your actual content or with concatenation of fields/columns for dynamic content.
Add the HTML Content visual to your report and put the measure on the Values/Content field well.
Ensure the content uses inline CSS only (no external scripts/styles). The HTML visual sanitizes scripts for security, but inline styling is supported.
If you need more advanced highlighting (e.g., a lot of tags or automatic color-coding), you can use a code-highlighting custom visual (e.g., Code by MAQ) instead of HTML Content, but you’ll still need to supply an HTML/string with color spans.

Please mark this post as solution if it helps you. Appreciate Kudos.