Using a custom Azure Function in PowerApps (e.g. to call the Graph)

In the last post we looked at how to call out to your custom code from Flow. In this article I want to talk about the similar process for PowerApps, so that we can get to the point when our own code is running - perhaps when a button is clicked in the PowerApp or a screen in the app loads. This article is essentially a companion article to the last one. In fact, we did the important work of creating a custom connector (required by both PowerApps and Flow to call into our function code) there – so if you’re using my posts as a guide, you’ll need to reference my Flow article even if you’re only working with PowerApps. Here are the links again:

• Using a custom Azure Function in Flow
• Using a custom Azure Function in PowerApps [this article]

In both cases, it’s all about creating a custom connector which talks to your Azure Function, and then using the connector appropriately in PowerApps/Flow.

A recap on the overall process

Essentially the bit that’s different between PowerApps and Flow is the bit at the end – the overall process looks like this:

A PowerApp to update the user’s profile

In my last article, I used the idea of an Azure Function/custom connector that can update the user’s Office 365 profile from Flow. We’ll use the very same Azure Function/custom connector but from PowerApps this time. Since we already have the connector defined, it’s fairly easy to start using it in PowerApps.

I created a fairly simple PowerApp that uses each of my API’s functions:

• Fetch profile details –> run when the “Lookup user” button is clicked
• Update profile details –> run when the “Update user” button is clicked

In some ways, this could potentially be a useful PowerApp in the enterprise with a bit more work. Perhaps it could be useful for first line employees who rarely use a desktop PC, but occasionally need to update their profile for example. In any case, the overall recipe of a PowerApp which can do powerful things by calling into an Azure Function is certainly a useful technique to have in the toolbox.

For my app, I didn’t do too much on the user interface - here’s what it looks like:

In real life I’d lose the “Lookup user” button and just have the user’s existing data be loaded when the app loads – but for now, having the two buttons is useful to help illustrate my two methods and how to wire things up. If you did want to fetch the data without a button click, you would just take the PowerApps formula in the “Lookup user” button’s OnSelect event and use it in the first screen’s OnStart or OnVisible event instead.

Adding a data source

Once you have your connector created and made available, to use it in PowerApps you need to add a data source which points to the connector. You can then use your methods in PowerApps formulas. Creating the data source is done like this:

In the panel that appears now, find the connector which represents your API/Azure Function:

It should then be successfully added:

That’s it – you can now call your Azure Function from PowerApps.

Wiring up to app controls

Essentially, what you’ll find is that when you’re typing a formula somewhere in PowerApps, your API is available and has some auto-completion/IntelliSense on the methods. So in my case, I can start typing ‘cob’ and then my API’s methods appear:

‘

When I select a method, I get prompted for the parameter(s) required:

Using in practice

The first thing we do is set the default value of the text input controls to the appropriate value of the JSON object returned from fetching the user’s data – for example, here’s the display name text box:

All we’re doing here is working with variables in PowerApps, but if you’re new to this there is some weirdness compared to coding. You need to understand PowerApps commands such as Set, UpdateContext, Collect/ClearCollect etc. This guide helps you out - Understand canvas-app variables in PowerApps

Once our text input controls are set to display the values of the “fetchedUserData” variable, we populate that object by calling into our custom connector.

On the “Lookup user” button’s OnSelect event  (or screen OnVisible event) – note that we’re passing in the current user’s account name from the label next to the photo. This is simply obtained from User() function in PowerApps, specifically User().Email (I’m assuming the e-mail address matches the account name in this case):

Consider that what we're doing here is calling the function once, and then storing the overall JSON returned as a variable. This matches up with how I've assigned the default value of my text input controls i.e. fetchedUserData.displayName.

On the “Update user” button:

NOTE: Don’t make the mistake of calling your function multiple times, once for each time you reference a value. That would look like this:

As per the comment, this approach means that your function is called multiple times rather than just once. Instead, ensure you call your function just once and then store the returned JSON in a variable. Each form control then references a child element of that JSON.

Summary

That’s it! You can now use Azure Functions within your PowerApps, which can open up lots of possibilities. In production you’ll need to consider who the custom connector is shared with/how it is made available (amongst other things), but the general process is quite straight-forward once you’ve done the hard work of defining your Open API definition etc.