Skip to content

Send a well formatted email using HTML, CSS and Power Automate

Published by Sumaira Noor on July 25, 2022

In this post we will take a step by step look on how well we can format the emails sent using HTML and CSS through Power Automate

This is just a manual trigger flow.

I have taken two SharePoint lists for this process.

One is Invoice list and another is product list. The relationship between Invoice and Product list is one to many.

I have divided this process into 4 parts

  1. The logo and the Company name formatting
  2. The section that displays Invoice Number, Invoice Period, Invoice To and Total
  3. The table with header and data
  4. A small message that shows invoice due date

mailTo is a compose input which consists of hardcoded email address.

The logo and the Company name formatting

cssHeader includes below code

.colImg{float:left;width:30%;padding:16px;height:100px} 
.colCompany{float:left;width:30%; height:100px} 
*{box-sizing:border-box;}

contentHeader has below code

<div>
   <div class="colImg">
      <img src="https://wfiot2018.iot.ieee.org/files/2016/01/sample-logo@2x.png" alt="Logo" width="200" height="50"/>
   </div>
   <div class="colCompany"><br></div>
   <div class="colCompany">
      <h2><a href="https://docs.microsoft.com"> COMPANY NAME </a></h2>
   </div>
</div>

The section that displays Invoice Number, Invoice Period, Invoice To and Total

cssForSecondPart is a compose action that includes CSS for various invoice details

.col{float:left;width:20%;padding:2px;height:120px}
.colPara{font-size:0.66em}

htmlForSecondPart is a compose action that includes html outline for various invoice details.

In this part, replace the content between @{} to that of your content

<div>
<div class="col">
<h5>Invoice Number</h5>
<p class="colPara">@{outputs('getInvoice')?['body/InvoiceNumber']}</p>
</div>

<div class="col">
<h5>Invoice Period</h5>
<p class="colPara">@{outputs('getInvoice')?['body/InvoicePeriod']}</p>
</div>

<div class="col">
<h5>Invoice To</h5>
<p class="colPara">@{outputs('getInvoice')?['body/InvoiceTo']}</p>
</div>

<div class="col">
<h5>Total</h5>
<p class="colPara">@{outputs('getInvoice')?['body/TotalCost']}</p>
</div>
</div>

The table with header and data

cssForTable is a compose action which includes below code

td,th{
border:1px solid #ddd; 
padding:0.66em;
}
Table{border-collapse:collapse;width:100%}
tr{font-size:0.66em;}
th{background-color:#80dfff;font-size:2em;font-weight:bold;}
body{background-color:#f5f5f0;}

Take a Create HTML Table action.

From inputs include outputs(‘getItems’)?[‘body/value’]

Header includes values from ‘getItems‘ step

A short message that shows invoice due date

lastMessage is a compose action which includes HTML and CSS for a short message display

<p style="color:red;">Please pay your invoice by @{
formatDateTime(outputs('getInvoice')?['body/InvoiceDueDate'],'dd.MM.yyyy')}</p>

In this part, replace the content between @{} to that of your content

finalResult – Compose includes outputs from below actions

<!DOCTYPE html> 
<html> 
<head> 
<style> 
@{outputs('cssHeader')}
@{outputs('cssForTable')}
@{outputs('cssForSecondPart')}
</style> 
</head> 
@{outputs('contentHeader')}
@{outputs('htmlForSecondPart')}
@{body('Create_HTML_table')}
@{outputs('lastMessage')}
</html>

In this part, replace the content between @{} to that of your content

Result

If you liked the post, please share it with others 🙂

Please feel free to comment if you are stuck in any step

Thank you for reading 🙂

Published inPower Automate