A Modern Autograph Book - Part 3 - Flow

Welcome to Part 3 of my series of blogs guiding you through how to create your "Modern Autograph Book" using most of the Power Platform. If you haven't already visited the previous elements, it's worth while having a quick read through "A Modern Autograph Book - Part 1 - Preparation" to get an understanding of what we're trying to achieve, and then "A Modern Autograph Book - Part 2 - PowerApp" to ensure that you've got a PowerApp which you can use to provide data.

So now we're going to look at the Microsoft Flow aspect of this solution which will take a series of inputs from the PowerApp, process them and do something with it. What we will also introduce during this blog is the concept of a custom connector.

Getting started

When we look at the triggers which are available from Flow, there is a trigger called "PowerApps" which will allow to connect and execute this trigger directly. This will work for most of scenarios, however there are occasions where this doesn't quite fit the bill due to the input requirements, and our Autograph Book is one of them.

If we consider the data which we want to get from our PowerApp, we have a name which is text, and we have a photograph and autograph which are both images. All seems quite normal at this stage until you understand that the two types of image are stored differently. If I look at the collection in PowerApps and inspect the elements of the two images you'll see the following:

The Photograph gets passed through as an actual image, which Flow can quite easily take and using the "Create File" action can store it within SharePoint.


The complexity really surrounds the autograph element which is stored as a Blob in PowerApps and is referenced using a URL. This can't be used in the "Create File" action, so we need to change approach slightly.


What we're going to use instead is the "When a HTTP request is received" which will allow us to control what data and types are being passed through to our Flow. Before we look at how to pass that data, let's quickly construct our Flow.

Flow Actions

The first thing which I am going to do is pull out a number of key pieces of information from the HTTP request that Flow receives, and it's going to receive that information in one of two ways:

  1. Query String Parameter - the data is going to be appended to the URL in the format of ?myparam=myparamvalue and is generally used for passing simple datatypes such as a string. This is going to be used to pass the name of the person from my PowerApp.
  2. Request Body - the data could be more complex and therefore will become part of the request body. In this tutorial, I'm going to use this to pass the autograph and the photograph.
In order to pull out the data from our Trigger, I'm going to use one of the built in Data Operation actions, in particular "Parse JSON". I'm actually going to use this three times to extract the relevant data from our HTTP call.

Get Person Name

When you have added your "Parse JSON" action, it will ask you for an input. Within the expression builder, there's a really nice expression called "trigger()" which allows you to reference the trigger event. 
But where this expression really earns its value is when you start to build that out your expression by telling it what part of the trigger you want to work with. What I am referring to for the person name, is part of the querystring, therefore I can build out my expression to extract the value of the "person" parameter.

Get Autograph / Get Photograph

Next I'm going to extract the encoded pictures from the body of the trigger, using a similar method. I'm still going to "Parse JSON" but I'm going to use a slightly different expression. I'm going to use "triggerMultipartBody(index)" which recognises that I'm sending multiple elements through my request, and I'm going to target specific parts of that body.
In this instance, index 0 is going to be my autograph, and index 1 is going to be photograph.

Creating Files

That is the most complicated part of the Flow done! The hardest thing, I find, is always getting the right data in the right format for use elsewhere. Now we can go back to using the built in actions to achieve our next step which is to save our photograph and autograph to SharePoint.

For this I'm going to use the built in "Create File" action from the SharePoint category. What this will allow me to do is take the encoded files from the request and push them straight into SharePoint. I wouldn't have been able to do this for the autograph if I'd have used the "PowerApps" trigger.


Assuming that this is successful, I will then call out to my Azure Function to prompt that to create the Word Document which is achieved using a simple HTTP request to the function webhook. We'll create the Azure function in Part 5.


Wrapping Up Part 3


By following the steps detailed above, you now have a Flow which, once we've generated a URL for our Azure Function, will start to process our documents. The thing we're missing at the moment is how to connect our PowerApp to our Flow which we'll explore in Part 4,

Comments