Extending The Capability Of PowerApps Using Azure Functions

Before reading this article, it is expected that you have the basic knowledge of PowerApps and creating the apps, using PowerApps Studio for Windows or Web Studio for PowerApps.

As we know, PowerApps makes it very easy to create no code mobile Applications without the need to write any code, which can run on an iOS, Android, Windows and Web. It also allows you to easily integrate with many SaaS providers such as SharePoint, Dropbox, Google Drive, Facebook, OneDrive, Salesforce and Dynamics etc.

However, in certain scenarios, there may be a need to add some custom logic on the Server side for further processing or connecting with the data sources, which are not provided out of the box.

PowerApps allows you to extend the functionality with the connection to Custom APIs and one of the easiest way to do it is through Azure functions.

Azure functions provides a very convenient and an easy way to develop custom logic called functions, which runs in Cloud without the need to worry about the hosting solution. You can do the things like processing the data, integrating with other systems such as storage, queues etc.

In the example given below, we will see how to call an Azure function in PowerApps. This will involve the steps given below.

• Creating an Azure function.
• Creating a Swagger definition for it.
• Creating a new connection in PowerApps for Custom API.
• Adding the connection as Content Source in PowerApps.
• Calling the function in the app.

Creating an Azure function

• Go to https://functions.azure.com/ and click Get Started.
• In case you already have an existing subscription for an Azure portal, then you can use it by signing in or creating a free account, which will allow you to try out Azure functions for the limited time.
• For this example, I will use my existing subscription.
• Once logged in, you will be prompted to create a New Function app (basically a container for your functions). Provide the name & region and click Create & Get Started Button.
  
   
  
  
• This will take you to Azure portal, where we will create a function under Function app.
• To get started quickly, you will be provided with some pre defined functions. You can choose the scenario as Webhook + API and language as JavaScript and click Create this function.
  
   
  
  
• The code should look, as shown below. We will use the default code, which accepts a query string parameter and returns ‘Hello + query string parameter’.
  
  
  
  
• The function is ready to be used and you can run it in the test tab, which is provided at the side.
  
  Provide the name parameter in the request body Window and click Run.
  
  
  
  
• You should see Hello Test as an output.

Creating a Swagger Definition

• We will create the Swagger to describe Azure function REST API.
• You can use some Online Editors to create the Swagger, or in this case, I have used a Notepad and saved it as JSON.
• The file looks, as shown below. I have highlighted the changes; which you may need to make based on your function.
  
   
  
  
• The title (TestAzureFunction) will be the name with which we refer to the function inside PowerApps and operation Id (RunFunction) will be the formula.
  
  
• The “host”, “path” and “code- default” parameters can be derived from the function URL.
  
   

Creating a new connection in PowerApps for the Custom API

• To add Custom API in PowerApps, login to the Web Studio or Desktop Studio for PowerApps and click Connections > New Connection.
  
   
  
  
• Go to Custom tab and click New Custom API.
  
   
  
  
• Upload the Swagger definition file, which is created and provide a name. You may optionally upload the icon or use default. Click Next.
  
  
  
  
• It will parse the Swagger file.
  
  
  
  
• Now, it will take you to the Authentication Type page.
  
  
• As of now, we have not defined any authentication for the function & will go with No Authentication but it is possible to protect Custom APIs, using Azure Active Directory and basic authentication.
  
  
  
  
• Click Create and a new connection for our Custom API will be created.
  
  
  
  
• Click + symbol to add the connection in the list of connections available for use.

Adding the connection as Content Source in PowerApps

• To use the function in PowerApps, we will create a new app, using Blank layout.
  
  PowerApps Studio for the Web > New App > Blank App > Phone layout.
  
  
• Under Content tab, go to DataSources > Add DataSource > New Connection.
  
  
  
  
• From the list of connections, choose TestAzureFunction and click Create. It will be added as a data source for the app.
  
   

Calling the function in the app.

• I have created a simple screen in the app with 3 controls.
  
  
• ‘text input’ control as an input box.
• ‘text box’ control for showing the output.
• ‘button’ control to trigger my function.
  
  
  
  
• In the onSelect Property of the button, I have pasted the formula given below.

UpdateContext({varOutput:TestAzureFunction.RunFunction(Inputbox.Text)})

• I am calling the formula RunFunction and providing the parameter as the text from my text input control. When you type TestAzureFunction, you will get intelliSense for the RunFunction & the parametexpected.
  
  
• I am using the UpdateContext function of PowerApps to store the output of an Azure function in a variable varOutput.
  
  
  
  
• Next, I have set the text property of my output box to varOutput.
  
  
  
  
• Now, when I run the app; the function is called at button click and returns ‘Hello + input string’, as expected.
  
   

I hope, the above article has helped you to get started on extending the capability of PowerApps, using custom code, through the use of Azure functions.