While playing with “HTML tables” earlier today, I suddenly realized that there seem to be a bit more depth to it than I expected.
Let’s say you have this Flow:
And imagine that you wanted to
- Add headers with spaces
- Change overall look and feel of the rendered table
Turns out those things are not that straightforward.
But, to start with, when I first tried using an HTML Table today, I found that I’m having troubles adding dynamic values. Instead of the regular dynamics values screen with the searchbox and two tabs (“dynamics content” / “expression”):
I saw this:
Have you ever seen it like that? If you have not, and if you see it, don’t panic. It’s not a new feature!
Just try scaling your browser window down. Even if you currently at 100%, scale down to 90. Definitely scale down to 100 if you are at 130. Once you do it, you’ll probably see the usual dynamics content window:
Let’s get back to the HTML Table, though.
Using dynamic content there is as straightforward as anywhere else in the Flows, but how do we add colors, border, modify text size, etc?
For example, if I add HTML font tag to the value:
That’s only going to mess up the output since those tags will be added there as “text” rather than as html:
So, there is an awesome post which explains the basic concept behind HTML Table formatting options:
https://www.sharepointsiren.com/2019/07/formatting-html-tables-in-flow/
Essentially, we need to get the output and post-process it. I can easily get the output by adding a Compose action:
You can take that source and use TryIt to see how it looks like:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
What if, instead of messing with that HTML, we just styled that table using an external stylesheet? To make it look more like this:
Of course if you wanted to play with CSS, you might probably make it look even better. How do we add that CSS to the output of the HTML Table action, though?
First, get that CSS file uploaded on some web server which would be available from wherever the table will eventually be viewed. Maybe to Azure somewhere(for instance: https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website)
In my case, I am using “styledtable” class name, so I’ll just need to add that class name to the table tag, and I’ll also need to add “link” tag to the output to link my css file to the table. Here is a compose action to do it:
And here is that replace function (you’ll definitely need to adjust it for your needs):
replace(body(‘Create_HTML_table’),'<table>’,'<link rel=”stylesheet” href=”https://itaintboring.com/downloads/tablestyle.css”><table class=”styledtable”>’)
All that’s left is to test the result, so let’s add the output to an email:
And have fun with the results:
And one last note… normally, you are not allowed to add spaces to the header fields. But, of course, you can always use a Compose action to compose something with spaces, and, then, use that action’s output for the header fields:
There we go:
