Flow: HTML Email Customisation with CSS

Back in part 8 – Call O365 Roadmap Web Service Weekly Digest you will see that we are generating the last 7 days worth of updates from the Microsoft 365 Roadmap and we are sending them as a weekly digest. The emails look like below:

I like them, they are well laid out and mostly readable but there are some values missing so once I got to adding them I realised the lay out and the styling required some thought. So now I am working with an output that looks like this:

Whether or not one is better than another is elementary in this post. I am going to show you the changes I had made in order to present the email in this way.

Here is a look at the relevant completed section now that the changes to the HTML & CSS have been made:

Note: The expressions and functions used within the body will be covered in the next post

The main change is that there are less inline style and the Send an email 2 action has full HTML markup, HTML, Head, Body, Style tags are used. It is possible to style the tables, and I have covered this in part 3 & part 4 of Create Office 365 Alerts Shared Mailbox from APIs. I have left an inline style in both the compose & Send an email 2 actions as it is entirely possible and practical to use inline style should you so desire.

I have created 4 simple classes, heading-font, grey-text, font-18 & font-bold. These are applied using inline span tags and allow nice manipulation of the text.

Colspan has been used also when formatting the table, All rows are colspan="4" except from the bottom row which maintains it's 4 columns and allows us to put the 4 values for Featured ID, Added to Roadmap, Last Modified & Tags in a single row.

Below is the exact code used:

<tr>
   <td colspan="4" class="grey-text">
      <h3><a href="@{items('Compose_the_links_for_each_blog_post')?['primaryLink']}"><span class="heading-font">@{items('Compose_the_links_for_each_blog_post')?['title']}</span></a></h3>
   </td>
</tr>
<tr>
   <td colspan="4" class="grey-text">Posted on @{formatDateTime(item()?['publishDate'], 'M')}<span> • @{items('Compose_the_links_for_each_blog_post')['categories'][0]} @{if (contains(items('Compose_the_links_for_each_blog_post')?['summary'],'Q1'),replace(items('Compose_the_links_for_each_blog_post')?['summary'], items('Compose_the_links_for_each_blog_post')?['summary'], 'Q1' ) ,null)} @{if (contains(items('Compose_the_links_for_each_blog_post')?['summary'],'Q2'),replace(items('Compose_the_links_for_each_blog_post')?['summary'], items('Compose_the_links_for_each_blog_post')?['summary'], 'Q2' ) ,null)} @{if (contains(items('Compose_the_links_for_each_blog_post')?['summary'],'Q3'),replace(items('Compose_the_links_for_each_blog_post')?['summary'], items('Compose_the_links_for_each_blog_post')?['summary'], 'Q3' ) ,null)} @{if (contains(items('Compose_the_links_for_each_blog_post')?['summary'],'Q4'),replace(items('Compose_the_links_for_each_blog_post')?['summary'], items('Compose_the_links_for_each_blog_post')?['summary'], 'Q4' ) ,null)}</span></td>
</tr>
<tr>
   <td colspan="4"><span class="font-18">@{items('Compose_the_links_for_each_blog_post')?['summary']}</span></td>
</tr>
<tr>
   <td>&nbsp;</td>
</tr>
<tr>
   <td><span class="font-bold">Featured ID:</span> <span>@{items('Compose_the_links_for_each_blog_post')?['id']}</span></td>
   <td><span class="font-bold">Added to Roadmap:</span> <span>@{formatDateTime(item()?['publishDate'], 'dd/MM/yyyy')}</span></td>
   <td><span class="font-bold">Last Modified:</span> <span>@{formatDateTime(item()?['updatedOn'], 'dd/MM/yyyy')}</span></td>
   </td>
   <td><span class="font-bold">Tags:</span> <span>@{item()?['categories']?[1]} @{if(not(equals(item()?['categories']?[2], null)), concat('• ', item()?['categories']?[2]), ' ')} @{if(not(equals(item()?['categories']?[3], null)), concat('• ', item()?['categories']?[3]), ' ')} @{if(not(equals(item()?['categories']?[4], null)), concat('• ', item()?['categories']?[4]), ' ')} @{if(not(equals(item()?['categories']?[5], null)), concat('• ', item()?['categories']?[5]), ' ')}</span></td>
</tr>
<tr>
   <td style="height:30px"><span>&nbsp;</span></td>
</tr>

<html>
   <head>
      <style> 
         .heading-font {
         color:#212121; 
         font-weight:Normal;
         text-decoration:none;
         font-size:22px;
         }
         .grey-text {
         color: #777777;
         }
         .font-18 {
         font-size:18px;
         }
         .font-bold {
         font-weight:bold;
         }  
      </style>
   </head>
   <body>
      <h2><span style="color: #212121;font-weight:Normal;text-decoration:underline;font-size:22px;">Check out the latest from the Microsoft 365 Roadmap:</span></h2>
      <table>@{join(outputs('Compose'),'')}</table>
   </body>
</html>

Alan

Tweet