cancel
Showing results for 
Search instead for 
Did you mean: 

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:     

 

DailyReport.png

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 ActionRecurrence.png

     

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 queryDevOps_Query.png

     

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.

DevOps_Lengths.png

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.

SendingEmail.png

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.

 

HTML_CSS_Flow.png

 

 

Meet Our Blog Authors
  • Working daily with Microsoft Cloud to deliver the needs of my company, my customers and various Microsoft communities and forums. | Office 365 | Flow | PowerShell | PowerApps | SharePoint |
  • Co-founder of https://plumsail.com, Office 365 and SharePoint expert. Passionate about design and development of easy to use, convenient and flexible products.
  • Microsoft Business Apps MVP. Owner of ThriveFast, an Office 365 consulting company.
  • 7x Microsoft Business Solutions MVP (CRM)
  • Solution Architect with Slalom, and organizer of the Boston Office 365 User Group, and long term SharePoint/Office 365 veteren. Find more at http://www.davidlozzi.com. Follow @DavidLozzi
  • I'm keen in MS technologies, SharePoint, Office 365 and development for them
  • Daniel is a Business Productivity Consultant & Microsoft Business Solutions MVP who is very enthusiastic about all things Office 365, Microsoft Flow, PowerApps, Azure & SharePoint (Online). Since the preview, Daniel has been working with Microsoft Flow and later on with Microsoft PowerApps. That led to him being awarded an MVP Award for Business Solutions. He loves to blog, present and evangelize about improving productivity in the modern workspace with these amazing tools!
  • Michelle is an Office 365 solution architect in Twin Cities, MN. She has been delivering business collaboration solutions for years with her focus on SharePoint and Office 365. Michelle is a recent board member of the Minnesota Office 365 User Group and has been a member of the SharePoint community since 2009. She is a frequent speaker at MNSPUG and SharePoint Saturday and co-chaired the Legal SharePoint User Group for 4 years. Her most frequent projects have involved rolling out a large deployment of Office 365, SharePoint Online intranet, build of a "CHAMPS" Office 365 user adoption program and most recently, SharePoint On-Premise to Online Migration. Michelle is very excited about cloud technology as it is shifting her IT Pro focus to collaboration strategy and technical adoption.
  • I'm a Microsoft Office Servers and Services MVP with a special interest in SharePoint, Office 365, Microsoft Flow, Microsoft Teams and PowerApps. I work at Triad Group Plc ( https://triad.co.uk)
>