PowerApps and Flow are great, and there are a lot of standard connectors that we can use within our PowerApps and Flows. But sometimes we may want to do something just a little different where there is no connector out of the box. This is when we may want to create a custom connector within PowerApps. The next question is how do we write the function for the custom connector, and the answer to that is we can do it through Azure using Function Apps. These allow us to register a function service within Azure and then code our function online without even having to open up Visual Studio. In this walkthrough we will step through how you can do this, and also introduce the Azure Function Apps to those of us that have never used them before.

1. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Custom
PowerApp Connector
Using Azure Functions
Murray Fife
July 2017
TIPS & TRICKS

2. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating an Azure Function App
Creating a Function within our Function App
Creating a Swagger definition for the Azure
Function
Creating a custom PowerApp Connector to the
Azure Function
Creating a new Connection to our Function App
Connector
Using Azure Function Connector in a PowerApp
Flow
Running the Flow
PowerApps and Flow are great, and there are a lot of standard
connectors that we can use within our PowerApps and Flows. But
sometimes we may want to do something just a little different
where there is no connector out of the box.
This is when we may want to create a custom connector within
PowerApps.
The next question is how do we write the function for the custom
connector, and the answer to that is we can do it through Azure
using Function Apps. These allow us to register a function service
within Azure and then code our function online without even
having to open up Visual Studio.
In this walkthrough we will step through how you can do this, and
also introduce the Azure Function Apps to those of us that have
never used them before.
Creating a Custom PowerApp Connector Using
Azure Functions

3. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
The first step in this process is to create a new Function App within Azure
that we will use to house our custom function that we will eventually
register and consume within PowerApps.
Creating a Custom PowerApp Connector Using Azure Functions
Creating an Azure Function App

4. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating an Azure Function App
To do this, open up the Microsoft Azure portal and click
on the + button to add a new resource. Then type in
Function App into the search box to find the Function
App resource type and select it.
Creating a Custom PowerApp Connector Using Azure Functions

5. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating an Azure Function App
This will take you to the Function App creation form.
All we need to do here is click on the Create button.
Creating a Custom PowerApp Connector Using Azure Functions

6. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating an Azure Function App
This will take us to the Function App Create dialog where
we will want to set up a few defaults for our Function App.
Creating a Custom PowerApp Connector Using Azure Functions

7. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating an Azure Function App
We will start off by giving our Function App and App
name.
Here we set our App name to dicerollerapp.
Sometimes you may need to tinker with the App name a
little to find a function name that is not already reserved
within the azurewebsites.net domain, so if the name you
choose is reserved, then just try different variations until
you find one that works.
Creating a Custom PowerApp Connector Using Azure Functions

8. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating an Azure Function App
This will automatically default in values for the Resource
Group and also the Storage account, and we will leave
these as the default values.
To make the function easier to find, also check the Pin to
dashboard option, and then click on the Create button to
create our new Function App.
Creating a Custom PowerApp Connector Using Azure Functions

9. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating an Azure Function App
This will return us to our Azure dashboard and we will see
that the Function app is being provisioned for us.
After the Function App is created, just click on the tile.
Creating a Custom PowerApp Connector Using Azure Functions

10. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating an Azure Function App
This will take us to the Function App Overview form where
we can start creating our functions.
Creating a Custom PowerApp Connector Using Azure Functions

11. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Now that we have registered our Function App within Azure, we can start
creating the function that we will want to perform within our PowerApp.
Creating a Custom PowerApp Connector Using Azure Functions
Creating a Function within our Function App

12. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Function within our Function App
To do this, click on the Functions tab within the Function
App explorer and then click on the + New function button.
Creating a Custom PowerApp Connector Using Azure Functions

13. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Function within our Function App
This will open up a list of templates that we can choose
from for our Function App.
For this example we will select the HttpTrigger – C#
template.
Creating a Custom PowerApp Connector Using Azure Functions

14. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Function within our Function App
This will show us some default details that we will can
update for our Function App.
Creating a Custom PowerApp Connector Using Azure Functions

15. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Function within our Function App
If we want we can change the Name of the function to
something a little less generic.
Here we changed the Name to Roll and then clicked on the
Create button.
Creating a Custom PowerApp Connector Using Azure Functions

16. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Function within our Function App
This will create a new C# function for us with a little bit of
code to help us along the way.
Creating a Custom PowerApp Connector Using Azure Functions

17. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Function within our Function App
Rather than use the default code we will replace it with the
following function.
Creating a Custom PowerApp Connector Using Azure Functions

18. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Function within our Function App
using System.Net;
public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
{
int randomNumber;
log.Info("C# HTTP trigger function processed a request.");
// parse query parameter
string die = req.GetQueryNameValuePairs()
.FirstOrDefault(q => string.Compare(q.Key, "die", true) == 0)
.Value;
// Get request body
dynamic data = await req.Content.ReadAsAsync<object>();
// Set die to query string or body data
die = die ?? data?.die;
Random random = new Random();
if (die == "D10"){
randomNumber = random.Next(1,10);
} else if (die == "D8") {
randomNumber = random.Next(1,8);
} else if (die == "D6") {
randomNumber = random.Next(1,6);
} else if (die == "D4") {
randomNumber = random.Next(1,4);
} else {
randomNumber = random.Next(1, 20);
}
return die == null
? req.CreateResponse(HttpStatusCode.BadRequest, "Please pass a Die code on the query
string or in the request body")
: req.CreateResponse(HttpStatusCode.OK, randomNumber);
}
Creating a Custom PowerApp Connector Using Azure Functions

19. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Function within our Function App
To test the function, all we need to do is click on the Run
button, which will compile the code and then try to perform
the function.
Initially the function will fail, because our code has a
parameter of die that we need to pass through to it, and if
you look on the right hand side, within the Request body
the function is passing a parameter of name.
Creating a Custom PowerApp Connector Using Azure Functions

20. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Function within our Function App
If we change the parameter name to die, give it a value of
D20 and then run the function then we will see in the
Output area we will get a random number between 1 and
20.
Creating a Custom PowerApp Connector Using Azure Functions

21. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Now that we have created our function we will need to create a Swagger
definition for our Function app.
This is the definition that PowerApps will use to know where the Function
App is and also what all of the parameters and returned values are for the
function.
Creating a Custom PowerApp Connector Using Azure Functions
Creating a Swagger definition for the Azure
Function

22. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Swagger definition for the Azure Function
To do this we will just create a new text file and paste in the
following code into it.
Creating a Custom PowerApp Connector Using Azure Functions

23. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Swagger definition for the Azure Function
{
"swagger": "2.0",
"info": {
"version": "1.0.0",
"title": "DiceRollerApp2"
},
"host": "dicerollerapp.azurewebsites.net",
"paths": {
"/api/Roll": {
"get": {
"description": "Calls my azure function over https",
"operationId": "RunThis",
"parameters": [
{
"name": "code",
"in": "query",
"description": "code",
"default": "FIPSu1oqs1SJaurLPakKNGQbH9CHCEF7lvetzif7ZsriN1uJ8J88MA==",
"type": "string"
},
{
"name": "die",
"in": "query",
"required": true,
"default": "D20",
"type": "string"
}
],
"responses": {
"200": {
"description": "Successful response",
"schema": {
"title": "The response of the api.",
"type": "string"
}
}
}
}
}
}
}
Creating a Custom PowerApp Connector Using Azure Functions

24. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Swagger definition for the Azure Function
There are a couple of changes that we need to make to this
file though to make sure that it is pointing to our new
Function App.
The first one is to update the title of the definition to match
our function.
For this example we set the title to DiceRollerApp.
Creating a Custom PowerApp Connector Using Azure Functions

25. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Swagger definition for the Azure Function
Then we will want to change the host URL to point to our
Function App. This is the name that we initially gave out
Function App when we created it.
Creating a Custom PowerApp Connector Using Azure Functions

26. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Swagger definition for the Azure Function
Because we changed the name of the function within the
Function App we will also want to update the path URL to
reference the name of the function that we used.
For this example the path is /api/Roll.
Creating a Custom PowerApp Connector Using Azure Functions

27. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Swagger definition for the Azure Function
Also because we changed the name of the parameter that
we are passing to the function from name to die then we
will also want to update the parameter definition to match
that parameter.
Creating a Custom PowerApp Connector Using Azure Functions

28. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Swagger definition for the Azure Function
There is one last change that we need to make to the
Swagger definition, and that is to give it a Host key code
that it will use to authenticate against the Function App.
To find this, return back to the Function App and click on
the Settings tab in the header.
At the bottom of the form you will see that there are dome
Host Keys.
Click on the Click to show link for the default host key.
Creating a Custom PowerApp Connector Using Azure Functions

29. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Swagger definition for the Azure Function
This will show us the Host key code and we will want to
copy the key.
Creating a Custom PowerApp Connector Using Azure Functions

30. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a Swagger definition for the Azure Function
Now return back to the Swagger definition and paste the
Host key code into the default value for the code
parameter.
After we have done that we can save the file.
Creating a Custom PowerApp Connector Using Azure Functions

31. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Now that we have created our Swagger definition, we will want to create
a new custom connector within PowerApps that calls the Azure Function.
Creating a Custom PowerApp Connector Using Azure Functions
Creating a custom PowerApp Connector to the
Azure Function

32. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
To do this, open up PowerApps and then click on the
Connections menu item.
Creating a Custom PowerApp Connector Using Azure Functions

33. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
This will open up the Connections form and we will want to
click on the Manage custom connections button in the
header.
Creating a Custom PowerApp Connector Using Azure Functions

34. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
When the Custom connections page is displayed, click on
the Create custom connector link.
Creating a Custom PowerApp Connector Using Azure Functions

35. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
This will open up a definition form for our new Custom
connector.
Creating a Custom PowerApp Connector Using Azure Functions

36. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
Now click on the folder icon for the Custom connectors
and find the Swagger file that we just created and click on
the Open button.
Creating a Custom PowerApp Connector Using Azure Functions

37. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
This will load in the default configuration for the Function
App and also set all of the parameters for the connector.
Creating a Custom PowerApp Connector Using Azure Functions

38. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
We can add a custom icon for the connector if we like just
by clicking on the Upload icon button and then selecting a
picture.
Creating a Custom PowerApp Connector Using Azure Functions

39. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
For this icon we have a white background, so we will want
to make the Icon background color match this and set it
to the hex color for white which is #ffffff.
Creating a Custom PowerApp Connector Using Azure Functions

40. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
Finally we will give out connector a Description and then
click on the Continue button.
Creating a Custom PowerApp Connector Using Azure Functions

41. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
This will take us to the Security tab and all we need to do
here is click on the Continue button.
Creating a Custom PowerApp Connector Using Azure Functions

42. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
Now we will be taken to the Definition tab where we can
add a little more detail to our connector.
Creating a Custom PowerApp Connector Using Azure Functions

43. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
Start off by adding a Summary for the connection.
Here we wet the Summary to Dice Roller.
Creating a Custom PowerApp Connector Using Azure Functions

44. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
And we also changed the Description to explain a little
about what the connector does.
After we have done that we will want to click on the Create
connector button in the header to create the connector
with all of the definitions that we supplied.
Creating a Custom PowerApp Connector Using Azure Functions

45. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a custom PowerApp Connector to the Azure Function
After a few seconds we will get a notice that the connector
was created and we can then click on the Test link to start
testing the connector out.
Creating a Custom PowerApp Connector Using Azure Functions

46. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Now that we have created our Connector we will want to create a
connection to it within PowerApps so that we can use it.
Creating a Custom PowerApp Connector Using Azure Functions
Creating a new Connection to our Function App
Connector

47. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a new Connection to our Function App Connector
To do this, click on the + New connection button on the
Test page.
Creating a Custom PowerApp Connector Using Azure Functions

48. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a new Connection to our Function App Connector
This will open up a dialog box asking us if we really want to
create a connection and we will want to click on the Create
button.
Creating a Custom PowerApp Connector Using Azure Functions

49. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Creating a new Connection to our Function App Connector
This will create a new Connection for us within PowerApps.
Creating a Custom PowerApp Connector Using Azure Functions

50. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Once we have a Connection within PowerApps to our Function App, we
can start using it within our Flows.
Creating a Custom PowerApp Connector Using Azure Functions
Using Azure Function Connector in a PowerApp
Flow

51. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Using Azure Function Connector in a PowerApp Flow
To do this, click on the Flows link within the menu bar on
the left and then click on the Create from blank link in the
header.
Creating a Custom PowerApp Connector Using Azure Functions

52. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Using Azure Function Connector in a PowerApp Flow
This will create a new PowerApp button for us to start
building our Flow around.
Creating a Custom PowerApp Connector Using Azure Functions

53. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Using Azure Function Connector in a PowerApp Flow
Start off by clicking on the New Step button and then click
on the Add an action button.
Creating a Custom PowerApp Connector Using Azure Functions

54. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Using Azure Function Connector in a PowerApp Flow
When the Choose an action form is displayed, we can now
search for the new connector that we created and select the
Action that we want to link to the flow.
In this case I was able to find the DiceRollerApp and select
the Dice Roller action.
Creating a Custom PowerApp Connector Using Azure Functions

55. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Using Azure Function Connector in a PowerApp Flow
And now we have a new action in the Flow that will allow us
to call the Azure Function App.
Creating a Custom PowerApp Connector Using Azure Functions

56. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Using Azure Function Connector in a PowerApp Flow
If we want to act on the results of the function we can add
in a condition and then when we select any value field, the
returned value shows up from our Function App.
Creating a Custom PowerApp Connector Using Azure Functions

57. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Using Azure Function Connector in a PowerApp Flow
Now we can flesh out our Flow a little bit so that it has a
couple of notifications based on the result that is returned
from the Function App.
When we are done we can click on the Create flow button
to create the flow.
Creating a Custom PowerApp Connector Using Azure Functions

58. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Using Azure Function Connector in a PowerApp Flow
After the flow has been created, all we need to do is click
on the Done button.
Creating a Custom PowerApp Connector Using Azure Functions

59. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Congratulations. We now have a Flow that uses our Custom Connector,
which in turn calls the Function App that we created in Azure. Let’s see it
in action.
Creating a Custom PowerApp Connector Using Azure Functions
Running the Flow

60. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Running the Flow
To see the flow running and calling the Function App, just
click on the Pencil icon to the right of the flow.
Creating a Custom PowerApp Connector Using Azure Functions

61. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Running the Flow
This will open up the Flow and show us the steps and also
that it is using our new Connector that we created.
Creating a Custom PowerApp Connector Using Azure Functions

62. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Running the Flow
To test out the Flow, just click on the More button and then
click on the Run now link.
Creating a Custom PowerApp Connector Using Azure Functions

63. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Running the Flow
This will open up a dialog box asking us if we really want to
run the Flow.
All we want to do here is click on the Run flow button.
Creating a Custom PowerApp Connector Using Azure Functions

64. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Running the Flow
This will then tell us that the flow ran successfully.
To see the flow execution, just click on the See flow run
activity link in the dialog box.
Creating a Custom PowerApp Connector Using Azure Functions

65. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Running the Flow
This will open up the Activity list and we will see that the
Flow ran successfully.
Creating a Custom PowerApp Connector Using Azure Functions

66. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Running the Flow
If we drill into the Flow we will be able to see that the Dice
Roller ran, and also that the second notification was
triggered.
Creating a Custom PowerApp Connector Using Azure Functions

67. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Running the Flow
If we expand out the Dice Roller step then we will also see
that we rolled a 10.
Better luck next time I guess.
Creating a Custom PowerApp Connector Using Azure Functions

68. www.microsoft.com
© 2017 Microsoft Corporation. All rights reserved.
Now we have a way that we can create our own custom functions and
then add them into PowerApps as a custom Connector.
By using the Azure Function Apps we can create pretty much any type of
function that we can think of.
For example, we can use this same scenario to create
• Text manipulation or search functions,
• Random data generators
• Calls to other services that are not yet available within PowerApps
How cool is that?
Review
Creating a Custom PowerApp Connector Using Azure Functions