Creating an HTML Email using MSFlow and Data from DevOps

This flow shows you how to send a daily email to your team members to remind them about open issues in AZURE Boards.  The email integrates HTML, CSS and images to make it more appealing.

Introduction

Nowadays people rely on mobile devices and alerts to track the work they need to do. In this example, we are leveraging the use of MS Flow to send reports directly in a format that people use the more:  emails.  We are using Azure Boards as our source of information for the email.  If you are familiar with Azure Boards, you know that you can create multiple types of issues.  You can use queries, to count the number of issues based on status, type, assigned to, etc.  You can access this information through dashboards and reports, but we also have found that sending an email is an easy and fast way to provide the most important information to the users.

Let’s assume that we have four different queries that retrieve data from DevOps.  You want to represent those four results in different sections in your email for reporting process.   In our case, we will have the following:

• New emails
• WIP
• Escalations
• Tasks

Everyday, we want to let our team members know the different issues that they need to work on.   After integrating all the connectors and building an email using HTML, your team members will receive an email that includes images and colors:     

Pre-Conditions

To build this flow, we are assuming that you

• have access to DevOps Azure Boards,
• know how to create queries in Azure Boards,
• know HTML and CSS
• have the basic knowledge of MS Flow
• have images hosted on a public domain. In this example, I am using Azure Blob storage to host images for our email.  

Building the Flow

We want our team members to receive the daily report every morning at 6:00am, so we will setup a Recurrence trigger. In addition, we will initialize 5 variables to make our style dynamic.  If we want to change the colors of the header, footer and subtitle, we can do that easily.  We also can change the text of the header and footer as well.

• Title email: It’s a string variable that will be used for the Subject of the Email and the Heading inside of the email. It is used inside the HTML code in the Send an Email action.
• Footer text: It’s a string variable that will be used for the footer of the email inside the HTML code in the Send an Email action.
• Hdr Ftr Background Color: It’s a string variable that store the hexadecimal code for the header and footer. It is used inside the CSS Style
• Subtitle Background Color: It’s a string variable that store the hexadecimal code for the subtitle background and it is used inside the CSS Style  
• CSS Style: It’s a string variable that has all the CSS style code to be applied to the HTML email.  This variable is used inside the Send an Email Action

   

The next step is to create four actions DevOps Query using the DevOps Connector. For each DevOps Query, we need to use the built-in function length to know how many items were retrieved by each Query:

• Account Name: Enter the account name of your DevOps account
• Project Name: Enter the project name inside your DevOps account
• Query Id: Enter the ID of the query that you want to run. It can be copied from the URL after running the query

   

For the length, you need to refer to the object returned by the DevOps query.  In this example, it is: 

 length(body('DevOps_Query:__All_Active_Work_Items')?['value'])

For our example, there are 5 DevOps Queries and 5 length functions to get the total of rows. The totals will be used inside the email.

The final step is to add the action Send an Email using the connector Office 365 Outlook.  To use HTML, make sure you set the property Is HTML to true on the Advanced Options.

HTML, CSS and the Flow at a Glance

The HTML and the CSS code is provided below as a reference.  You can use HTML editors to create your own HTML code and style.  Note that email doesn’t support all the HTML tags and CSS attributes.  The following expressions found on the code refers to variables and actions defined previously:

• @{variables('…')}: It refers to the variables defined at the beginning of the flow
• @{outputs('….')}: It refers to the results of the length built-in function

You also will need to update the src attribute inside the <img> tag with the location of your images.   Also, make sure you validate your code for accessibility and a responsive design.

The following image shows the HTML and CSS code and the different variables and functions being used to generate the email. From the flow perspective, it shows how each component is playing a role in the final result.