There are many repetitive tasks that we all wish we could execute with just a tap of a button. Button flows allow you to accomplish these and many other tasks simply by tapping a button on your mobile device. The Microsoft Flow team recently introduced it, you can read more about it here: Introducing button flows. At this moment there are already more than 40 templates available for button flows.

Time to play with it! What would be a fun but useful scenario to use a flow button and is currently not listed in the templates? I can imagine a lot of things, but one thing I often do when I leave work is letting my wife know what time I will come home. How about automating that task with one click of a button?

The Azure Function

Today we can use many services without programming a line of code, we only have to call an API to get the functionality we want. I wanted to use the Google Maps Directions API for the directions because it’s pretty accurate. With Microsoft Flow you can call API functions easily. Since this API has a complex JSON output and Microsoft Flow currently has trouble dealing with a lot of JSON nesting, I had to do some logic in an Azure Function. This way I could also limit the result set to the fields I wanted to use. For now it is enough for me to know the distance and the time it will take to get home.

I used the HttpTrigger-CSharp template to create my function, that will be run whenever it receives an HTTP request. Below the code I used to get the directions for my current location to my home address. I hard coded my address in the request url, since I am not moving anytime soon 🙂

The Flow

Now we have an Azure Function that returns the duration and the distance from my geolocation to my home. Let’s create a flow to use that data.

First of all, create a new Flow using Create from blank

Choose Flow button for mobile.

Flow home button

Choose the manual trigger.

Flow home button trigger

Now you have a Manual trigger that you can execute using the Flow mobile app.

Flow home button created

We want to call the Google Maps Directions API using Azure Functions so we add an HTTP – HTTP action.

Flow home http azure function trigger

To call the Azure Funcion, set the Method to POST.

Paste the Uri from your Azure Function.

And fill the Body of the action with the JSON below.

Flow home http azure function finished

To use the results from the Azure Funcion we have to Parse the JSON, add another action and type “json” to look for the action.

Choose Data Operations – Parse JSON.

Flow home json parse

If you want the JSON Schema to be generated, click “Use sample payload to generate schema” and fill in the following JSON:

   "duration": "30 mins",
   "distance": "40 km"

After you click Done the schema is generated.

Flow home json parse done

Now we can use duration and distance further in the process. I choose to send an e-mail. You can use HTML markup if you enable HTML mail in the advanced options. I also added a Google Maps image to make the experience richer.

Flow home output e-mail

The Result

When I tap this giant button on my phone, Flow will send my Geo location to my Azure Function, which will return the distance and duration calculated by Google Maps.

Flow home button

Finally an e-mail will be send with the current address where I am, how long it will take me to come home and how many kilometers I have to drive.

Flow home e-mail

Microsoft Flow and Azure Functions are very powerful in many ways. You can automate small tasks in a short period of time. Let me know what you think of this Flow. What would you like to automate with the tap of a Flow button?