Using Azure Functions in PowerApps

  • [アーティクル]

In this blog I want to show how easy is to use the newly introduced Azure Functions from a PowerApps. Azure Functions provides a very convenient and easy way to develop custom logic called Functions that runs in the cloud and without the need to worry about the hosting solution at all. You can do things like processing data, integrating with other systems such as storage, queues and many other features on your favorite language C#, Node.JS, Python and more.

PowerApps provides a very convenient and simple way to create business mobile applications without the need to write any code that run on iOS, Android, Windows and Web, that allows you to easily integrate with many SaaS providers such as SharePoint, Dropbox, Google Drive, Facebook, OneDrive, Salesforce, Dynamics and many more, however, in some cases you might need to write some custom logic on the server-side to do some further processing. In this example I’ll show you how you can extend PowerApps to call an Azure Function.

 

To use an Azure Function from a PowerApp there are four simple steps

  1. Create the Azure Function
  2. Define the REST signature using Swagger
  3. Add a Custom API in PowerApps
  4. Use the new Custom API from a PowerApp

Creating the Azure Function

The first step is to create the Azure Function, for that just:

  1. Go to https://functions.azure.com/ and click Get Started.
  2. On that page, enter a name and a location for your new Azure Function, in my case I'm using Name:azurefn and Region: West US
    new-azure-function
  3. Click Create + get started. This will take you to the Azure Portal where you can then choose the scenario, in this case use Webhook + API and I’ll be using C# for this example.
    new-azure-function-template
  4. In this case I’ll leave the default code since that returns “Hello” + the name provided as a parameter in the query string, so you should see something like the following image.
    default-azure-function-code
  5. At this point our Azure Function is done and you can run it using the Run button at the bottom of the page, or even call it passing the right “code” parameter provided, such as: https://azurefn.azurewebsites.net/api/HttpTriggerCSharp1?name=Carlos&code=h6zt…your-code-here…i

 

Creating the Swagger to describe the Azure Function REST API

There are a few editors that can help you create your swagger such as https://editor.swagger.io/, however in this case it is a very simple REST API that only receives a “name” query string parameter, and the code to be able to call the API, so I just went and defined it in a JSON as below. Note that I used the title MyAzureFunction which is the way I will refer to inside PowerApps, and I called the operationId RunThis which will be name of the formula. You can use the example below as a starting point, just edit the “Host” to match your site, and the paths as needed.

{
"swagger": "2.0",
"info": {
"version": "1.0.0",
"title": "MyAzureFunction"
},
"host": "azurefn.azurewebsites.net",
"paths": {
"/api/HttpTriggerCSharp1": {
"get": {
"description": "Calls my azure function over https",
"operationId": "RunThis",
"parameters": [
{
"name": "code",
"in": "query",
"description": "code",
"default": "h6ztu…[your code here]…i",
"type": "string"
}, {
"name": "name",
"in": "query",
"required": true,
"type": "string"
} ],
"responses": {
"200": {
"description": "Successful response",
"schema": {
"title": "The response of the api.",
"type": "string"
}
}
}
}
}
}
}

 

Adding a custom API in PowerApps

To register a custom API in PowerApps simply navigate to https://web.powerapps.com/#/connections/available/custom/create

(or click Manage->Connections->New Connection->Custom->New Custom API … hurray for deep linking).

create-custom-api

Click Next and Create.

 

Using the new Custom API from a PowerApp

To use the newly created Custom API, just:

  1. Launch PowerApps Studio
  2. Create a new PowerApp, in my case I used New –>Blank App –>Phone Layout
  3. Go to the Content option in the ribbon and click DataSources.
  4. In the Data sources panel click the “Add data source” button, click “+ Add Connection”, and select your Custom API.
    power-apps-add-datasource
  5. Once you have added it to the PowerApp you will get Intellisense for it, in my case I called it MyAzureFunction and RunThis, and as you can see in the image below it even gives me the description and the parameter name, in this case “name”.
    using-custom-api-in-powerapp
  6. When you run the PowerApp, and you type any values in the TextInput you will see how it automatically tracks the changes and evaluates the formula which will magically perform the right HTTP REST API call to App Service executing our Azure Function and returning the concatenation “Hello ” + name provided.
  7. powerapps-running

 

Summary

In this simple example I show you how easy it is to add any HTTP API to a PowerApp, in our case we used the simplest Azure Function that returns “Hello “ + the value provided in the “name” query string parameter. Of course at this point you can now extend as you want the azure function to do much more interesting things like calculations, data gathering, integration to external systems, and more.

 

One final note: It is worth calling out is that one thing to consider is authentication, with this approach the "code" that is used to authorize is actually coming to clients which is not ideal if your API is not something you want to allow. For example using Fiddler someone could see the code and reuse. PowerApps supports protecting Custom APIs using Azure Active Directory and basic authentication but I'll keep that for a later post.

Comments

  • Anonymous
    May 09, 2016
    Nice article, thank you.I want Azure Functions + Microsoft Flow version of this issue.
  • Anonymous
    August 19, 2016
    Your swagger definition did not work for me immediately. I got syntax errors when I attempted to upload to PowerApps, so I went to the swagger editor and remade it. This was the final result for me, someone else can use it to kick start their process and save some time:{ "swagger": "2.0", "info": { "version": "1.0.0", "title": "MyAzureFunction" }, "host": "chle...[your host]....t", "paths": { "/api/HttpTriggerCSharp1": { "get": { "description": "Calls my azure function over https", "operationId": "RunThis", "parameters": [ { "name": "code", "in": "query", "description": "code", "default": "esd1...[your code]...", "type": "string" }, { "name": "name", "in": "query", "required": true, "type": "string" } ], "responses": { "200": { "description": "Successful response", "schema": { "title": "The response of the api.", "type": "string" } } } } } }}
  • Anonymous
    November 15, 2016
    I only saw one reference to "json" above. I saw nothing about how to create the file, where to store it, nor how to dereference it (e.g., in the Swagger Endpoint field in the Flow that calls my Azure function).I tried going to the Files link in the Azure Functions editor, then I created a file, pasted my edits (from the sample below), and hit the Save button. Was that the correct thing to do? I named it swagger.json.I have yet to divine the url to that json.I can see the file from the Azure Functions console window: D:\home\site\wwwroot\GenericWebhookCSharp2\swagger.json, but this clearly won't work online.Given my advanced age, I'm confident that I simply didn't read the blog post closely enough...
    • Anonymous
      November 15, 2016
      Yes, it was my old age. When I actually went to actually create the custom api at PowerApps.com, I saw everything I needed to find the swagger file I saved locally.However, the detailed directions to create the custom api in such a way that they actually show up on PowerApps Studio appear to me to be different than described above. And frankly, since I was exploring, I wasn't keeping track of what I did, exactly.but they we already know we need to defer to my old age...
  • Anonymous
    November 18, 2016
    I just discovered (in V1 or Azure Functions, at least) a Keys blade. if we use Keys, does this implement authentication? I'll research this offline, but your next blog should probably disabuse your readers of their ignorance, here.
  • Anonymous
    May 19, 2017
    Hello Carlos,Thank you for the detailed article.I was trying the same example, however I am facing an error while registering custom connector via swagger file as follows:Your custom connector has been successfully updated, but there was an issue converting it to WADL for PowerApps: Encountered internal server error. The tracking Id is '8a4f6b87-4846-45c0-999c-4ee2a8a87dcf'. Would you please suggest what could be the reason ?Thanks and Regards,Dipti Chhatrapati