Creating Azure Functions, Custom Connectors and using them inside of Power apps

[chass]

There are over 400 connectors to connect Power Apps to almost every conceivable service, database or back end. This article is how to connect to end points that don’t have a custom connector or custom purpose-built Azure functions. The documentation does a great job of walking through creating an Azure Function. https://docs.microsoft.com/en-us/azure/azure-functions/create-first-function-vs-code-csharp. This walk through will assume you have followed these directions to create an Azure Function -and start from there.

Creating the Azure Function

Step 1. Create a new Function using the Azure Functions Extension.

Select the Azure Functions extension for Visual Studio Code and add a new function using the lighting bolt glyph.

Step 2. Set the function to use HttpTrigger trigger

Step 3. Name the Azure function.

In this example we have named the function “SydneyWeather”

Step 4. Supply the name space name.

In this example we have used the name “Getweather.Function”

Step 5. Set the Permission Access type.

Since this is a demo, set the access to anonymous.

Step 6. Check in the Function to version control.

Step 7. Deploy this function into the Azure Subscription.

In this lab is updating the function created earlier in the https://docs.microsoft.com/en-us/azure/azure-functions/create-first-function-vs-code-csharp lab.

(Not this is for demo purposes only, normally one would not check in directly to a production site)

Step 8. Run the Function interactively in a browser.

In this example the function was deployed to a function with the name “GetTemperature” therefore can be called using the following URL

https://gettemperature.azurewebsites.net/api/Sydneyweather

This returned the following:

“This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.”

If a query string is passed in like the following:

https://gettemperature.azurewebsites.net/api/Sydneyweather?name=Chuck

Will return the following:

“Hello, Chuck. This HTTP triggered function executed successfully.”

While Azure Functions extension for Visual Studio Code makes it easy to create an HTTP based function the default template returns a string, it does NOT return JSON…So these functions this can be called from a Flow in Power Automate, Power Apps requires all connectors return JSON.

Update the function to return JSON

Step 9. Open the function implementation.

Click on the files view of Visual Studio code and the SydneyWeather function

Step 10. Edit the function to return JSON

Comment out the template return and paste in the following code:

//return new OkObjectResult(responseMessage);

var myObj = new {name = “Mostly Sunny”, location = “Sydney”};

var jsonToReturn = JsonConvert.SerializeObject(myObj);

return new OkObjectResult(jsonToReturn);

This should look like the following image:

Step 11. Checkin this update.

Step 12. Deploy these updates:

Step 13. Run the function interactively from the Browser.

Running the updated browser will now return the following JSON

Congratulations your Azure function is now ready to be called by Power Apps!

Creating a Power Platform custom connector to reference the Azure Function.

Step 14. Log in to Power Apps.

Step 15. Navigate to the Custom Connectors hub under the Data Menu

Step 16. Select New Custom Connector > From Blank Template

Supply a connection name….in this case I simply called it “SydneyWeather”.

Step 17. Supply the initial Connector information.

Step 18. Continue Past the security section (no need to set anything)

Step 19. Set the general definition data

Step 20. Create the request via “Import from Sample”

Change the verb to “Get” and past in your function URL….From the example above it would be:

https://gettemperature.azurewebsites.net/api/sydneyweather

Then click impot

Step 21. Create the response from example body

Using the browser run response, paste in the response to the body and select import. In the example above it would be:

        {"name":"Mostly Sunny","location":"Sydney"}

Step 22. Proceed to Test

Step 23. Create the Custom Connector and a connection to it.

Step 24. Test the operation.

Using the connector from Power Apps

Step 25 Create a new Canvas Application.

Step 26. Navigate to the Connectors.

Step 27. Select our custom connector.

Step 28. Use the custom connector to invoke the Azure function.

Add a button and set the text of the button to the custom connector name, namespace and function name.

In this example it would be:

SydneyWeather.SydneyWeather().name

Congratulations you have created an Azure function, a custom connector and called them from Power Apps!