Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Creating a Custom PowerApp Connector using Azure Functions

441 visualizaciones

Publicado el

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.

Publicado en: Software
  • Sé el primero en comentar

Creating a Custom PowerApp Connector using Azure Functions

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×