Building Nice HTML Output for Tables in Microsoft Flow Emails

Very often in a Microsoft Flow, we want to send out emails. Many times, we have an array of values we’d like to include in the body of those emails, and using an HTML table is just the ticket. It only takes a little work to create the HTML, but I recently had to do this and didn’t know how.

I found a nice post from Chakkaradeep Chandran (@chakkaradeep) on how to go about it, below.

The way Chaks outlines works great, and in most cases you’ll have no problems. I’ve been sending out emails for a few weeks having followed this approach, and today I noticed a bunch of white space (blank lines) above my table in the email. There were 12 items in my array of objects, so this time it was very noticeable.

The problem stems from using the <br/> string as the “join” string. By doing this, Chaks is putting line breaks between table rows (<tr>). This is invalid HTML, but modern browsers and Outlook don’t really complain – they just try to render the output.

What ends up happening is the line breaks are rendered above the table. If you have a small number of items in your array, you might not even notice.

Here’s a fix. Instead of using the <br/> element in the Join action, use </>. This is like a noop in HTML – it does nothing. In fact, Outlook doesn’t even see it.

You can see above where I am joining all the HTML snippets – one per table row in the array – using the </> string. You have to use something, or the Join action complains.

For completeness, the screen snippet below shows how I’m using the Output for the Join action when I create the HTML email.

An additional caveat here is almost every time I edit the Flow (not every time for some reason), I get an error for the Select action above, and Flow tells me to “Enter a valid json.” Grammar issue aside, that’s because the Flow editor removes the double quotes around my HTML in the Select action’s Map parameter. Simply adding the double quotes around the “json” AGAIN fixes that little annoyance.

I really like Flow, but there is a LOT to it. I would argue it’s not so much an end user tool, as a citizen developer tool, regardless how Microsoft’s marketing positions it. I love citizen developers!