PowerApps: Integrating Azure Functions and Canvas Apps

When trying to come up with the best solution to a problem, it makes sense to look at all available options.  With PowerPlatform and Azure growing at such a rapid rate, the available options to solve a problem keep getting larger and larger.  Recently I decided to try to see how much effort it would take to create a Canvas App that seamlessly uses an Azure Function to do the heavy lifting, and return the result back to the canvas app.  Turns out, its very simple!  Here are the steps I took to create this solution, hopefully it will help someone.

Here are the high level concepts implemented in this solution:

• Create an Azure function to execute business logic, triggered from an http call.
• Use a Custom Connector inside a Canvas App to trigger the Azure Function and display the return parameters.
• The Azure function will take 2 input parameters, firstname and lastname, and simply concatenate them with a space between.  The concatenated value will then be returned in the http response body.

Build an Azure Function

1. Login to https://portal.azure.com
2. Find "Function App" in the left blade or search for "Function App"
3. Click Add to add a new Function App
4. Provide a unique name for your Function App
5. 
6. Click Create
7. After deployment finishes, open the Function App and click Functions (Don't use the next to functions or you cannot choose your own name)
8. Click New Function
9. 
10. Click HttpTrigger
11. 
12. Click HttpTrigger
13. 
14. Populate the name of your function
15. 
16. Click Create
17.  Use the following code for the function

18. 		#r "Newtonsoft.Json"
    		using System.Net;
    		using System.Net.Http;
    		using System.Collections.Generic;
    		using Newtonsoft.Json;
    		using System.Text;
    		
    		public static async Task Run(HttpRequestMessage req, TraceWriter log)
    		{
    		    string requestBody = await req.Content.ReadAsStringAsync();
    		    dynamic data = JsonConvert.DeserializeObject(requestBody);
    		    string firstname = data.firstname;
    		    string lastname = data.lastname;
    		    string name = firstname   " "   lastname;
    		    Dictionary resp = new Dictionary();
    		    resp.Add("name",name);
    		
    		    return new HttpResponseMessage(HttpStatusCode.OK) {
    		        Content = new StringContent(JsonConvert.SerializeObject(resp), Encoding.UTF8, "application/json")
    		    };
    }

19. Click Save
20. Expand "View files" "Test" from the right side of the screen
21. Create a sample request body similar to the following:

22. {
        "firstname": "Azure",
        "lastname": "Function"
    }

23. Click Save and Run
24. The Output should become populated with the following JSON

25. {
        "name":"Azure Function"
    }

26. Get an API Key to use in the URL for Authentication by clicking Manage, on the left, then click "Add new function key", Name the key API and click Save.
27. Retrieve a url that can be invoked to trigger the function, by clicking the function name (ConcatName) and then clicking "</>Get function URL"
28. 
29. Under Key, select API, then click Copy.  Save the URL for later

Create A PowerApps Custom Connector

1. In a new browser tab, Login to https://web.powerapps.com
2. Expand Data-->Custom Connectors
3. Click New Custom Connector
4. Choose Create from Blank
5. Give your connector a name, click Continue
6. 
7. In General Information, provide Description, leave HTTPS selected, and populate Host with the URL for the Azure Function (pfedevworkshop.azurewebsites.net).  In Base URL type "/api/"
8. Click Security-->
9. Choose API Key for the Authentication type
10. Under Parameter label type "code"
11. Under Parameter name type "code"
12. Parameter location can be changed to Query
13. Click Definition-->
14. Click the  New Action button to give the connector a task to perform
15. 
16. Populate the Summary, Description and Operation ID that matches your Azure Function Name
17. 
18. Under Request, click Import from sample
19. Select the POST radio button, paste in the full url copied from the Azure Function in the URL box
20. In the Body text box paste something similar to the following sample:

21. {
    	"firstname":"Custom",
    	"lastname":"Connector"
    }

22. Click Import
23. 
24. Request should look like the above.  Since code will be provided by the authentication mechanism in the connector, we can delete this parameter from the Query section
25. To ensure that the body parameter is populated correctly, click on the ellipsis and choose edit
26. 
27. Since firstname and lastname parameters were properly generated we can click Back and move on to the Response
28. Click Add Default Response
29. In the Body text box paste:

30. {
    	"name":"string"
    }

31. Click Import
32. Click on Default to ensure that the name parameter is represented like the following:
33. 
34. Click Back
35. At the top of the page, click Create connector
36. Click  4. Test
37. Click New Connection
38. In your Azure portal browser tab, Click Manage
39. Next to the API key, click "copy"
40. Paste the API key in the new connection dialog of the powerapps browser tab
41. Click Create
42. The Navigation then gets moved to Connections, instead of Custom Connectors, so we will select Custom Connectors again from the left, and click our custom connector, then click Edit, then 4. Test
43. Populate the first and last name parameters
44. 
45. Click Test operation
46. Your response should show a 200 status code and a name parameter returned in the Body
47. 

Create a Canvas App Using the connector

1. In the PowerApps browser tab, expand Apps
2. Click Create an App --> Canvas
3. I chose Blank App-->Phone layout
4. The blank app provides a link to "connect to data"
5. 
6. Click "connect to data"
7. Choose the connector we built earlier
8. Click the Insert tab
9. Under Text, add 3 Labels and 2 Text Input boxes
10. Then Add 1 button
11. 2 Labels will be used to describe the 2 input parameters, the 2 text input boxes are to enter a first and last name to use with the Azure Function.  The 3rd label will be where our output is rendered
12. I arranged my app in this way:
13. 
14. Now we need to make our Button perform the action defined in our connector, using the 2 Text Input boxes as the Input Parameters
15. Click the button, in the fx bar, enter the following:
16. 
17. As you type you will see the intelli-sense suggestions appear above or below the function box, to use the suggestions as you type, press the Tab key
18. Now we have a namecollection variable storing our result from the Azure Function.  We can use this to bind to the output label
19. Click the Label to be used for the Output (in the screenshot above I renamed mine "Output")
20. Enter the following in the fx bar:
21. 
22. This should be all we need to do to test out our App, click the Play button to test it out
23. 
24. Its easy to make quick changes to the Function App and make real-time changes, for instance, change line 14 to read:

    1. string name = lastname   ", "   firstname;

25. Now click the button in your canvas app again and see the update take effect right away
26.