Tutorial: How to use a REST API in Power Apps

[fabianloesch]

Note:

This tutorial uses premium features from Microsoft PowerApps. If you want to build this app you can create a free developer account here.

Introduction

In our module "Cloud based information systems", lectured by Prof. Dr. Christian Drumm at our university FH Aachen, we (Ben Pauly and Fabian Lösch) gained some insights into REST API's and Microsoft PowerApps. Our project was about the preparation, analysis and presentation of data in a PowerApps app using a REST API. In this blogpost we would like to give you a quick and understandable introduction to REST API's and how to integrate and use them in Microsoft PowerApps.

What is a REST API ?

REST (Representational State Transfer) is an architectural style for developing web APIs. RESTful APIs are a type of web APIs based on the REST architectural style. This architectural style defines a set of rules that should be followed when constructing an API to enable consistent and effective communication between client and server.

A RESTful API uses HTTP methods such as GET, POST, PUT, and DELETE to obtain, create, update, and delete data. Data is transmitted via HTTP requests and responses and is usually formatted in JSON format. The JSON format uses a simple syntax reminiscent of JavaScript objects. Data is stored as key-value pairs, where keys can be represented as strings and values as numbers, strings, Boolean values, arrays, or more JSON objects. Here is an example:

{
  "name": "Luke Skywalker",
  "age": 31,
  "isEmployed": true,
  "skills": ["JavaScript", "lightsaber", "force"]
}

Another important feature of RESTful APIs is that they are stateless. This means that no information is stored between requests. Each request contains all the information necessary to process the request and deliver the result. This makes it easier to scale and maintain RESTful APIs because there is no information to store between requests. Overall, REST is a proven architectural style for web API development that enables consistent, simple, and effective communication between client and server.

Swapi: Star Wars API

We decided to use the Star Wars API from SWAPI as an example data base. There are clear data about Star Wars available for free. These are returned in JSON format and can be used by us in PowerApps.

Postman

Postman is an API hub that allows you to design, test and execute API requests. The tool is very useful ,when working with API's as it allows you to see the exact response to a request. Here is an example where we have requested all planets from the Star Wars API via "GET https://swapi.dev/api/planets". Below you can see the answer in JSON format.

 

Custom Connector

To access external data in PowerApps or in our case to make an API call we need a so called Custom Connector. To create this connector we have to select the tab Custom Connector in the PowerApps menu under Dataverse. Next, click on the "new custom connector" radio button and select "Create without template".

First, we need to provide general information about the connector, as in the image above.

Next, we need to create a new action in the Definition section and enter any URL. For our example, the URL shown in the image is the one for the Star Wars API.

When we use the connector for the first time or want to test it in the "Test" area we have to add a connection. Here we may need to enter a token depending on the type of authentication. In our example no authentication is needed.

Flow creation

We call the Custom Connector from a small flow. To create the flow, you need to click on "Flows" in the main menu. After that, go to "+ New Flow" and then to "Instant cloud flow". Select the "PowerApps" trigger and click "Create". Add a second step to your flow by clicking "+ New step". Under the "Custom" tab, select your custom connector.

Add the third and final step to your flow by clicking "+ New Step" again. Under the "Built-in" tab, select the "PowerApps" field.

On your last step, click "+ Add an output", then "Text" and fill in the fields as shown in the image below.

You should then rename your flow. We have named our flow "planets_flow". This name will also be used in the rest of this tutorial. Afterwards you have to save your flow and test it if necessary.

App with chart

As the last component, we will create a canvas app where we will display the data from the REST API. To do this, click on "Apps" -> "+ New app" -> "Canvas" in the main menu. Give your app a name, we named our app "Star_Wars_App". We recommend selecting the tablet format to have more space for data display. Next, click on "Create." Once in the app editor, first add the flow you created earlier. To do this, click on the flow icon and then click "+ Add flow". Then select your flow.

In order to work with the JSON file from the REST API, we need to enable the ParseJSON function in the App Editor.To do this, open the Settings in the Editor. Click on "Upcoming features" and under the "Experimental" tab, enable the "ParseJSON function and untyped objects" feature.

Now we call the "planets_flow". The whole thing should happen when the screen is visible, so we use the property "OnVisible" of Screen1 for this. In the function bar we write the following code:

Set(planets_body, planets_flow.Run().planets_body);

To use the data from the JSON file in our app, we need to create a collection. For this we use the ClearCollect and ParseJSON functions. Working with the ParseJSON function can be a bit challenging, this video was a good guide for us. The attributes we want to store in our collection are called "name" and "population". Therefore, we also add the following code to the "OnVisible" function site of Screen1:

ClearCollect(
    planets_collection,
    ForAll(
        Table(ParseJSON(planets_body).results), 
            {name: Text(ThisRecord.Value.name), 
            population: Text(ThisRecord.Value.population)}
    )
);

Among the planets, however, there are some that we do not want to show in the diagram and thus have to sort out. For Hoth and Dagoba the poulation is set to "unknown". We filter out these values with the following function:

RemoveIf( planets_collection, population = "unknown")

Coruscant, with a population of 1 trillion, represents a significant outlier that would make our chart unreadable. Therefore, we remove this data set as well:

Remove(planets_collection, LookUp( planets_collection, name="Coruscant"));

The whole thing should now look like this:

To display the data from the collection in an attractive way, we use a column chart. We click on "+ Insert" and select the "column chart" under "Charts". Now you can see a column chart in the app, but it only contains default data. To use the data from the collection "planets_collection", we click on a column in the chart. Now you can select the "planets_collection" in the menu on the right side of the screen under the tab "Properties" for "Items".

If you now reload the browser tab, the data from the collection should be displayed in the chart. The chart can of course be further customized (e.g. chart title, bar spacing). In the ColumnChart menu there are some more properties with which the chart can be designed.

Now we are at the end of our tutorial. We hope we could give you a good insight into REST APIs in Power Apps and thank you for your interest!

This blogpost was part of a course at our university FH Aachen. If you want to learn more about this course or other exciting projects, feel free to visit the website of our lecturer Prof. Dr. Christian Drumm.

Best regards

Ben Pauly und Fabian Lösch

[BenPauly]

Sehr hilfreich und informativ!

[fabianloesch]

Thanks! 🙂

[jasonzh]

This is great!

It demonstrates how to connect the external data to PowerApps by Automation and API.

Only tricky thing for me is how to found out the "Custom Connector" from PowerApps.

Which it's under connection -> discover all -> data 

Thank you