PowerApps & Functions – Where low/no-code meets serverless… organizations can create apps faster!

Introduction

Like many organization, you’re probably also looking for a more “rapid development” track for a subset of your applications. I’ve heard a lot of reasons for this… Going from rapid prototyping to having small apps that make life a lot easier within the organization (like typical approval flows). For this we’re going to see how we can combine PowerApps & Azure Functions! By using PowerApps we want to take a low/no-code approach to creating the front-end, where Functions (or even Logic Apps as an alternative) will allow us to provide specific back-end data.

Recipe for today

Today we’ll be using the following ingredients as a base for the recipe of the day ;

Here we’ll be building a small powerapp that’ll call an API (OpenAPI Spec) that is hosted as an Azure function. So basically connecting a low/no-code app to a serverless API.

Taking a look on the Azure Functions side of the fence

Here I’m assuming you’ve already have setup the backend by using either the earlier mentioned tutorial or Github. Let’s take a look at it…

If you would provide a sample request body in the test pane ;

And press “Run”. Then you’ll see that it’ll return the following ;

{"message":"Yes","revenueOpportunity":"$7200","costToFix":"$1600"}

Nothing too exotic in this case, but it’ll get the job done one would say… ๐Ÿ˜‰ Now let’s see how we can expose that to our PowerApp later one. let’s go to the “Platform features” and then under the “API”-section, select “API definition” ;

Here you can generate the API definition. Though when using the Github repository, this should already be ready for you. Next up, let’s press “Export to PowerApps & Flow” ;

 

Here you’ll be presented with some options to configure the Custom API (which we can leverage later on) ;

And when pressing on the “OK”-button, it’ll create the Custom API inside of PowerApps.

 

Now let’s take a look at the PowerApps side of the fence!

Next up, we’ll head over to the “PowerApps“-portal. Here go to “Custom Connectors”, and you’ll see our newly created connector. Now let’s take a look inside… by pressing on the “Edit”-button.

The “General” info is already populated…

Same for the “Security”-info ;

And likewise for the “Definition”-info.

 

 

Though let’s take a look at the “Response” here…

You’ll notice that the response had identified three values that will be returned.

Where this seems trivial…It’s actually one of the major integration parts with PowerApps. This as it needs these kind of definitions that can be used later on in the “ClickerTheClick”-part of our experience. ๐Ÿ˜‰ Do you remember the API definition from a few moments back?

responses:
‘200’:
description: Message with cost and revenue numbers
x-ms-summary: Message
schema:
type: object
properties:
message:
type: string
description: Returns Yes or No depending on calculations
x-ms-summary: Message
revenueOpportunity:
type: string
description: The revenue opportunity cost
x-ms-summary: RevenueOpportunity
costToFix:
type: string
description: The cost in $ to fix the turbine
x-ms-summary: CostToFix

So be aware about the importance of this, and how this is your “integration link” in fact… Now onwards to testing it! Here we’ll see that there isn’t a connection yet. So let’s add a “New Connection” ;

Here you’ll be asked for an API key… Let’s first head back to our function, and go to “Function app settings” ;

And copy the “default” host key …

And enter it as the “API Key” for this custom connector ;

Give it a few seconds…

And you’ll see that you’re now the owner a brand new connection! ๐Ÿ˜‰

Let’s head back to the testing pane of our custom connector. And we’ll see that the connection can now be selected ;

Let’s use it to test our API…

And we’re happy to see that we’re getting back the expected response!

 

“ClickerTheClick!”… Here comes my PowerApp!

Now let’s create our app…

Select a “Blank app” with a “Phone layout” ;

Give t a bit…

And press “Skip” for the tutorial (or feel free to take the interactive tour)…

At the opening screen, press “Connect to data”. As we’ll be adding a static excel file for our reference data, and the custom connector for our interactive backend.

Let’s first do the excel file

Select “Turbines” ;

And then add our “Turbine Repair” connector ;

And our data connection are ready to be used!

In powerapps, add a new screen (“List Screen”) ;

And feel free to remove the default screen (“Screen 1”) ;

Now select the “Galler”y and click on “Data”.

Select the “Turbines” one here…

And tweak it to your liking!

Next up, whilst the gallery is still being selected, go to “TemplateFill” ;

And set the following formula to highlight the active/selected turbine ;

Now we’re going to add a search button ;

And a label to display our results…

With the button selected, go to “Advanced” and press the “OnSelect” option.

Here we’re going to add the following code ;

What does this do? The “ClearCollect”-function will delete all the records from a collection. In this case, the collection is named “DetermineRepair”. Our custom connector (kvaeswind…) has method called “CalculateCosts” to which we can send a request. The parameters are filled by using the fields from the selected gallery Item.

Next up… displaying the results! Let’s go to the “Advanced” part of the label, and select “Text” in the data section.

Here we’ll use the “First”-function to get the first record from the collection, and populate the text with the fields that were returned. Remember the discussion about the API definition? I hope you do, because the field defined there are the ones we’re using here!

Now let’s preview our app…

Let’s select a turbine that needs repairs (indicated by the word “Yes”), and press our button… Boom! We get the results back from our Azure Functions API via the custom connector.

And all that done via this “low code” interface called PowerApps!

 

Sharing is Caring!

Now let’s save our app…

And we’ll see a “Share this app”-button…

Here you can add anyone from your organization!

Now anyone who has been granted access can access the application.

 

Where can I run it?

You can run it from the studio (web or Windows), or the mobile version on your Android or iPhone device ;

Let’s see how that looks on the mobile side. Opening up the app, I can find it, and even save it to my favorites.

Now let’s start it…

And there it is! Functioning exactly like it was in the studio.

Natively within my mobile device (iOS in this case) ;

 

Closing Thoughts

Combining PowerApps & Functions provides you with way to quickly develop applications for your organization without the need for a lot of infrastructure. Do be aware that despite the low/no-code approach, this does not mean that everything happens magically! As shown, you’ll still have to think on your API defintions as this is the key component to getting a lot of the magic going.

That being said, I hope you enjoyed this post once again, and feel free to provide feedback on it!

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.