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
    
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.
    
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.
    
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: http://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 http://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).

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

 

 

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.