cancel
Showing results for 
Search instead for 
Did you mean: 
maricel0422

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

 

 

Comments
About the Author
  • Experienced Consultant with a demonstrated history of working in the information technology and services industry. Skilled in Office 365, Azure, SharePoint Online, PowerShell, Nintex, K2, SharePoint Designer workflow automation, PowerApps, Microsoft Flow, PowerShell, Active Directory, Operating Systems, Networking, and JavaScript. Strong consulting professional with a Bachelor of Engineering (B.E.) focused in Information Technology from Mumbai University.
  • I am a Microsoft Business Applications MVP and a Senior Manager at EY. I am a technology enthusiast and problem solver. I work/speak/blog/Vlog on Microsoft technology, including Office 365, Power Apps, Power Automate, SharePoint, and Teams Etc. I am helping global clients on Power Platform adoption and empowering them with Power Platform possibilities, capabilities, and easiness. I am a leader of the Houston Power Platform User Group and Power Automate community superuser. I love traveling , exploring new places, and meeting people from different cultures.
  • Read more about me and my achievements at: https://ganeshsanapblogs.wordpress.com/about MCT | SharePoint, Microsoft 365 and Power Platform Consultant | Contributor on SharePoint StackExchange, MSFT Techcommunity
  • Encodian Owner / Founder - Ex Microsoft Consulting Services - Architect / Developer - 20 years in SharePoint - PowerPlatform Fan
  • Founder of SKILLFUL SARDINE, a company focused on productivity and the Power Platform. You can find me on LinkedIn: https://linkedin.com/in/manueltgomes and twitter http://twitter.com/manueltgomes. I also write at https://www.manueltgomes.com, so if you want some Power Automate, SharePoint or Power Apps content I'm your guy 🙂
  • I am the Owner/Principal Architect at Don't Pa..Panic Consulting. I've been working in the information technology industry for over 30 years, and have played key roles in several enterprise SharePoint architectural design review, Intranet deployment, application development, and migration projects. I've been a Microsoft Most Valuable Professional (MVP) 15 consecutive years and am also a Microsoft Certified SharePoint Masters (MCSM) since 2013.
  • Big fan of Power Platform technologies and implemented many solutions.
  • Passionate #Programmer #SharePoint #SPFx #M365 #Power Platform| Microsoft MVP | SharePoint StackOverflow, Github, PnP contributor
  • Web site – https://kamdaryash.wordpress.com Youtube channel - https://www.youtube.com/channel/UCM149rFkLNgerSvgDVeYTZQ/