Formatting HTML Table In FLOW - Before Sending Email

In this article we will see how to format HTML table generated in FLOW, which you can use to send an email.

Introduction

 
Assume that you need to send recently added application requests to your department head on a daily basis. You can create a scheduled FLOW to achieve this. Use Recurrence trigger while creating the FLOW. Set time and frequency for when it will be triggered. You can fetch items/records from your data source, in my demonstration I am fetching items from SharePoint list using the Get Items action.
 
You can use Create HTML table action in FLOW to generate HTML table from the data fetched using Get Items action. In this action you can choose to let it generate the table columns automatically or you can specify the column names and values in it, as shown below - choose output of Get Items action in From field, enter column name in Header section and choose the column from your data source in Value section.
 
 

Problem

 
If you use the output of Create HTML table action directly to send an email, then the mail looks something like as below, without any borders and no space between the cells. So, how can we format this html table? How can we add borders and padding and other style attributes if we want to?
 
 

Solution

 
Yes, we can format an html table easily using some more actions in FLOW. We will be using compose action, with replace function. We will replace html tags in such a way that we add border and padding properties into it. Below is an overview of steps – check comments added in each action to understand what it does.
 
 
First action after Create HTML table is, Compose, to add table border. Use the below code through expression window. Here we are replacing <table> tag with same tag but with border propery <table border=“1”>
  1. replace(body('Create_HTML_table'), '<table>''<table border="1">')     

Second compose action 

 
In Compose 2, we need to replace encoded or ASCII chars with their actual symbols so that UI render tool treats it as correct html tags. Use the below code in expression window.
 
Note
Here we are using output of previous step.
  1. replace(replace(outputs('Compose'), '<''<'), '>''>')     

Third compose action

 
Compose 3, is to replace encoded or ASCII chars with its symbol for double quotes. Use below code in expression window.
 
Note
Here we are using output of previous step, compose 2
  1. replace(outputs('Compose_2'), '"''"')     

Last Compose action

 
Compose 4, is to add padding. Use the below code in expression window and make sure you use the output of previous step. Here we are replacing <td> tag with same td tag but with style property.
  1. replace(outputs('Compose_3'), '<td>','<td style="padding:5px">')    
As shown below use output of last compose action, in body section of Send email action. Save your FLOW and test it. If you have observed MS product team is continuously working towards enhancing every action in the FLOW - as they have enhanced Send email action to include rich text box features for Body section.
 
 
This is how your users will get an email, with border and cell padding added. You can do much more than this using style properties. It's just matter of replacing html tags with whatever you want.
 
 
You can even add/generate hyperlinks dynamically in this table using anchor tag, using which the end user can open specific items.
 
Thanks for reading, hope this helps.