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. Click Create
  6. After deployment finishes, open the Function App and click Functions (Don't use the + next to functions or you cannot choose your own name)
  7. Click New Function
  8. Click HttpTrigger
  9. Click HttpTrigger
  10. Populate the name of your function
  11. Click Create
  12.  Use the following code for the function
  13. 		#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")
    		    };
    }
  14. Click Save
  15. Expand "View files" "Test" from the right side of the screen
  16. Create a sample request body similar to the following:
  17. {
        "firstname": "Azure",
        "lastname": "Function"
    }
  18. Click Save and Run
  19. The Output should become populated with the following JSON
  20. {
        "name":"Azure Function"
    }
  21. 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.
  22. Retrieve a url that can be invoked to trigger the function, by clicking the function name (ConcatName) and then clicking "Get function URL"
  23. 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. 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/"
  7. Click Security-->
  8. Choose API Key for the Authentication type
  9. Under Parameter label type "code"
  10. Under Parameter name type "code"
  11. Parameter location can be changed to Query
  12. Click Definition-->
  13. Click the  +New Action button to give the connector a task to perform
  14. Populate the Summary, Description and Operation ID that matches your Azure Function Name
  15. Under Request, click +Import from sample
  16. Select the POST radio button, paste in the full url copied from the Azure Function in the URL box
  17. In the Body text box paste something similar to the following sample:
  18. {
    	"firstname":"Custom",
    	"lastname":"Connector"
    }
  19. Click Import
  20. 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
  21. To ensure that the body parameter is populated correctly, click on the ellipsis and choose edit
  22. Since firstname and lastname parameters were properly generated we can click Back and move on to the Response
  23. Click +Add Default Response
  24. In the Body text box paste:
  25. {
    	"name":"string"
    }
  26. Click Import
  27. Click on Default to ensure that the name parameter is represented like the following:
  28. Click Back
  29. At the top of the page, click Create connector
  30. Click  4. Test
  31. Click + New Connection
  32. In your Azure portal browser tab, Click Manage
  33. Next to the API key, click "copy"
  34. Paste the API key in the new connection dialog of the powerapps browser tab
  35. Click Create
  36. 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
  37. Populate the first and last name parameters
  38. Click Test operation
  39. Your response should show a 200 status code and a name parameter returned in the Body

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. Click "connect to data"
  6. Choose the connector we built earlier
  7. Click the Insert tab
  8. Under Text, add 3 Labels and 2 Text Input boxes
  9. Then Add 1 button
  10. 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
  11. I arranged my app in this way:
  12. Now we need to make our Button perform the action defined in our connector, using the 2 Text Input boxes as the Input Parameters
  13. Click the button, in the fx bar, enter the following:
  14. 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
  15. Now we have a namecollection variable storing our result from the Azure Function.  We can use this to bind to the output label
  16. Click the Label to be used for the Output (in the screenshot above I renamed mine "Output")
  17. Enter the following in the fx bar:
  18. This should be all we need to do to test out our App, click the Play button to test it out
  19. 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;
  20. Now click the button in your canvas app again and see the update take effect right away