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:
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
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.
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:
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:
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.