Now that I have my Flow created, I want to create a mechanism for my PowerApp to connect to this in a seamless way. The ideal way, and I really like this functionality, is to create a custom connector. This is what will sit between, and bridge the gap between PowerApps and the Flow which was created.
A custom connector allows you to create a reusable connection between the Microsoft Power Platform and any other web service in the world. There are a few ways which this can be achieved:
To find custom connectors in the first place, look to your left hand navigation, expand the "Data" option and then select "Custom connectors". The ability to create a custom connector is in the top right corner, so click it and select "Create from blank".
Under actions on the left hand side, click New Action and then start to fill out the form with the basic details such as the summary and the description.
The summary is a line of text which offers a little more context around what your action is going to do. Finally is the Operation ID which is the unique name for identifying this operation and will be used when we call it from PowerApps.
My request URL now looks like this:
https://prod-39.westeurope.logic.azure.com:443/workflows/FLOWID/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=SIGNATURE&Person=MattWeston365
We will now use this completed URL in the wizard to generate our request. Click on "Import from Sample" and you will see the "Import from Sample" blade appear on the right of your screen. Paste your request URL into the URL box, and because Flow is triggered by a Post event, I will select that as my verb.
If I know what my body is going to look like, I can also post in a sample payload into the "Body" area. Whilst I can't fully configure my payload correctly, unless you've actually run a test against your Flow using Postman or another tool, I won't know what my sample payload looks like in terms of pushing through two images so I'm going to add that manually later directly into my Swagger file.
After you've click Import, you'll see that your request is now being represented, and the various elements of the query and the body are now represented as objects which you can interact with.
In the query, I know what four out of the five elements are, they are all in the querystring which I copied from Flow, so I can assign each element a default value. For each of the following I'm going to make the querystring parameters mandatory, but not necessarily visible to the end user as I don't need them to provide the information.
What I am going to do now, is Create Connector by clicking on the relevant button at the top of the screen, as I now need to do a little bit of manual work with the definition file. So now, return to your Custom Connectors screen, and click on the download icon. This will download a json file (Swagger file) with the definition of what we've done through the wizard.
If you have a look through the file, most of the entries in there should look familiar as they are values that were set through the wizard. However, there are a few changes which I'm going to make though in order to make my Swagger file fit for purpose.
You can find the completed Swagger file for you to use here:
https://dev.azure.com/MATTWESTON365/_git/A%20Modern%20Autgraph%20Book%20-%20Swagger/branches
I'm going to make some basic changes, starting with setting the body to the correct, as it will currently have both Autograph and Photograph as strings. What we actually want to receive are Files, so I'm going to change my autograph and photograph inputs to be from the formData which is submitted, and also to a type of file.
Once I have made the necessary modifications to my Swagger file, I can now use this to update my Custom Connector so that it is configured in the correct way within O365.
Return back to your Custom Connectors list, and this time select the ellipsis (...) next to your connector, and select Update from OpenAPI file. This will launch a file browser, so upload your modified Swagger file and the changes will be reflected without you having to any further configuration.
Now let's use this from our PowerApp!
When we open our PowerApp, select the "View" tab, and select "Data sources". Whilst our Custom Connector isn't going to provide any data for our PowerApp, the connection will still be created here. You will see a blade appear in the canvas area called "Data" and it will give you the option to Add data source. Select "+ Add data source".
If you have any existing connections configured, they will appear here, however we want to add a "+ New connection" to bring in our custom connector. This will now give you a long long list of possible connectors without the ability to text filter (fingers crossed I'll be changing this sentence in the near future!!!) however the connectors are in alphabetical order, so you can scroll down quite quickly until you locate your connector. Once found, select it, and select "Create". You will now see your Connector located in the "Data" blade.
The final thing for me to do is interact with that connector from the control which I created on my ReviewSubmit page (icoSave). The property I want to define is "OnSelect" so when someone clicks or taps that icon, I will submit my data.
If I start to type the name of my connector (see the Title attribute in my Swagger file, AutographCreator if you're using mine as an example) intellisense will start to populate for me. If I then add a full stop, it will show me the name of my operation: "ProcessAutograph". PowerApps will then tell me that it is expecting three arguments to be provided, a name of a person, a photograph and an autograph. There are a couple of ways which I can now pass that data, the following example being the simplest of them:
AutographCreator.ProcessAutograph(txtNameOfPerson.Text, peninAutograph.Image, camPhotograph.Photo)
Now, when I hit my Save button, the required data will get pushed to Flow which will parse and process the basic data and pass it to the Azure Function which I'm going to be explore in the final part, Part 5 - Azure Function.
There's quite a lot in this section, so don't be afraid to ask questions if you get stuck at all. It was a journey of learning for me too when I first started playing with this, but once you've got the hang of it, there's a whole world of possibilities now available to you.
A custom connector allows you to create a reusable connection between the Microsoft Power Platform and any other web service in the world. There are a few ways which this can be achieved:
- Create from blank - this is what I'm going to use
- Import an OpenAPI file
- Import an OpenAPI from URL
- Import a Postman collection
To find custom connectors in the first place, look to your left hand navigation, expand the "Data" option and then select "Custom connectors". The ability to create a custom connector is in the top right corner, so click it and select "Create from blank".
General Information
As the title suggests this is the high level information required for our custom connector, but it doesn't really do it justice as some of the critical pieces of information are required on this page: Host and Base URL.
Feel free to change your icon and you colour etc if you wish, but I'm going to concentrate on what's below. The content which I need to put in these fields is generated from your Flow, in particular the HTTP Post URL from your Trigger:
https://prod-39.westeurope.logic.azure.com:443/workflows/FLOWID/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=SIGNATURE
The scheme is obviously whether it is HTTP or HTTPS:
https://prod-39.westeurope.logic.azure.com:443/workflows/FLOWID/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=SIGNATURE
Host is the URL which hosts your web service. In this case, it is the Azure tenancy address we want:
https://prod-39.westeurope.logic.azure.com:443/workflows/FLOWID/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=SIGNATURE
Base URL is the section after the Host which will remain static i.e. with Flow, you will always have /workflows/FLOWID. Therefore the base URL will be /workflows.
https://prod-39.westeurope.logic.azure.com:443/workflows/FLOWID/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=SIGNATURE
Security
I'm going to skip this step for this blog as I don't need any security for my Flow.
Definition
The definition step in the wizard is one of the best tools I have found within the O365 stack for being able to do a lot in little time. It allows us to define what actions are going to take place within the connector, what triggers there are. I'll expand out on some of these in a future blog, but for now I'm going to concentrate on the Action because my trigger is being managed by Flow.Under actions on the left hand side, click New Action and then start to fill out the form with the basic details such as the summary and the description.
General
The summary is what specifies the title for the action so make it short but descriptive of what it is you're doing.The summary is a line of text which offers a little more context around what your action is going to do. Finally is the Operation ID which is the unique name for identifying this operation and will be used when we call it from PowerApps.
Request
Creating the main bulk of the request is really quite simple too because we can import from sample. We have most of the sample already by taking the generated URL from the trigger event in our Flow. Cast your mind back to Part 3 where we also obtained the "Person" from the querystring, so in Notepad I'm going to add the person name parameter to the end of my trigger URL.My request URL now looks like this:
https://prod-39.westeurope.logic.azure.com:443/workflows/FLOWID/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=SIGNATURE&Person=MattWeston365
We will now use this completed URL in the wizard to generate our request. Click on "Import from Sample" and you will see the "Import from Sample" blade appear on the right of your screen. Paste your request URL into the URL box, and because Flow is triggered by a Post event, I will select that as my verb.
If I know what my body is going to look like, I can also post in a sample payload into the "Body" area. Whilst I can't fully configure my payload correctly, unless you've actually run a test against your Flow using Postman or another tool, I won't know what my sample payload looks like in terms of pushing through two images so I'm going to add that manually later directly into my Swagger file.
After you've click Import, you'll see that your request is now being represented, and the various elements of the query and the body are now represented as objects which you can interact with.
In the query, I know what four out of the five elements are, they are all in the querystring which I copied from Flow, so I can assign each element a default value. For each of the following I'm going to make the querystring parameters mandatory, but not necessarily visible to the end user as I don't need them to provide the information.
- api-version
- sp
- sv
- sig
For "Person" I am going to make it mandatory and make it "Important" as I need the user to provide some data here at the point of calling the connector.
What I am going to do now, is Create Connector by clicking on the relevant button at the top of the screen, as I now need to do a little bit of manual work with the definition file. So now, return to your Custom Connectors screen, and click on the download icon. This will download a json file (Swagger file) with the definition of what we've done through the wizard.
Swagger File
By downloading the file from Flow, I have got a fully valid and working Swagger file. There is a lot of documentation out on the web about Swagger (OpenAPI specification) https://swagger.io/specification/ so feel free to have a read if you want to learn more.If you have a look through the file, most of the entries in there should look familiar as they are values that were set through the wizard. However, there are a few changes which I'm going to make though in order to make my Swagger file fit for purpose.
You can find the completed Swagger file for you to use here:
https://dev.azure.com/MATTWESTON365/_git/A%20Modern%20Autgraph%20Book%20-%20Swagger/branches
I'm going to make some basic changes, starting with setting the body to the correct, as it will currently have both Autograph and Photograph as strings. What we actually want to receive are Files, so I'm going to change my autograph and photograph inputs to be from the formData which is submitted, and also to a type of file.
Once I have made the necessary modifications to my Swagger file, I can now use this to update my Custom Connector so that it is configured in the correct way within O365.
Return back to your Custom Connectors list, and this time select the ellipsis (...) next to your connector, and select Update from OpenAPI file. This will launch a file browser, so upload your modified Swagger file and the changes will be reflected without you having to any further configuration.
Using the Custom Connector in our Autograph Book PowerApp
Go back to the PowerApp which we created back in Part 2, which is taking in the autograph and the photograph. We're now going to plug in our Custom Connector to form the bridge between PowerApps and our Flow.When we open our PowerApp, select the "View" tab, and select "Data sources". Whilst our Custom Connector isn't going to provide any data for our PowerApp, the connection will still be created here. You will see a blade appear in the canvas area called "Data" and it will give you the option to Add data source. Select "+ Add data source".
If you have any existing connections configured, they will appear here, however we want to add a "+ New connection" to bring in our custom connector. This will now give you a long long list of possible connectors without the ability to text filter (fingers crossed I'll be changing this sentence in the near future!!!) however the connectors are in alphabetical order, so you can scroll down quite quickly until you locate your connector. Once found, select it, and select "Create". You will now see your Connector located in the "Data" blade.
The final thing for me to do is interact with that connector from the control which I created on my ReviewSubmit page (icoSave). The property I want to define is "OnSelect" so when someone clicks or taps that icon, I will submit my data.
If I start to type the name of my connector (see the Title attribute in my Swagger file, AutographCreator if you're using mine as an example) intellisense will start to populate for me. If I then add a full stop, it will show me the name of my operation: "ProcessAutograph". PowerApps will then tell me that it is expecting three arguments to be provided, a name of a person, a photograph and an autograph. There are a couple of ways which I can now pass that data, the following example being the simplest of them:
AutographCreator.ProcessAutograph(txtNameOfPerson.Text, peninAutograph.Image, camPhotograph.Photo)
Now, when I hit my Save button, the required data will get pushed to Flow which will parse and process the basic data and pass it to the Azure Function which I'm going to be explore in the final part, Part 5 - Azure Function.
There's quite a lot in this section, so don't be afraid to ask questions if you get stuck at all. It was a journey of learning for me too when I first started playing with this, but once you've got the hang of it, there's a whole world of possibilities now available to you.
Comments
Post a Comment