Score Big with Power Apps: A Step-by-Step Guide to Custom Football APIs

If (Sports Fan && Power App){ return "Goal!" }

You know what I really admire in software development? No matter if it is no-code or hard-coding, it is the ability to spark an idea and bring it to life using your own brainpower.

The FIFA World Cup is almost here. How about we use an extremely simple API call via a custom connector to build a Power App? It will allow us to track our favorite countries and leagues, and even build a playoff board to cheer for our teams.

What even are custom connectors?

In Power Apps, a Custom Connector is a bridge to any data source (and more) that has a REST API. I will show you how to make one and use it in your app.

But before we start building our awesome app, I have to give you a fair warning. Using Custom Connectors in the Power Platform requires a Premium License for every user who runs a flow or app that uses one. (There are workarounds that I will not touch upon in this material, but feel free to let me know if you want to learn them!)

Great, we are all set to begin now. I want to split my plan into two main steps.

Preparation: Obtain an API key and get comfortable with the endpoint documentation.

Step 1: Create and configure the Custom Connector. While configuring it may take a while and look a bit cumbersome, I assure you it is worth it. This is the core part of our app that we will heavily depend on.

Step 2: Add the Connector to the app and start using it. This part is more fun. The magic happens here!

Preparation

While the players are warming up getting ready for the game, and the crowd is taking its place around the stadium arena, we will look into our API choice.

There are countless data services out there, and today I will pick the api-football.com site. Notice how the service provides us not only with soccer data but a dozen other sports too. So if you are not a football fan, you can build your own hockey or basketball league app. Be my guest!

My goal is to get an API key and look up the request URL syntax. If you have never had to deal with an API key, think of it as a unique username and password combination squeezed into one long string of characters. It not only prevents unauthorized users from making calls, but it also identifies and tracks your API usage. Handy, eh?

We have to register an account to obtain an API key, where the free tier will allow us to make 100 calls a day. That is plenty to get started, I would say.

Important: Never ever share your API key! Yes, AI LLM chats count too! Remember, your API key is your unique ID. Treat it like your credit card PIN code.

After getting mine, I am going directly to the API documentation page api-football.com/documentation-v3. It tells us what calls are available, how to make requests, and shows examples of the output, which will be handy for our app. To configure our future Custom Connector, I am looking for a Host URL, which every API has. In my case, it is v3.football.api-sports.io. Great! The only thing left to do is to find the correct endpoint to get the list of all available countries.

I found this one:
api-football.com/documentation-v3#tag/Countries

// Get all available countries across all {seasons} and competitions
get("https://v3.football.api-sports.io/countries");

// Get all available countries from one country {name}
get("https://v3.football.api-sports.io/countries?name=england");

// Get all available countries from one country {code}
get("https://v3.football.api-sports.io/countries?code=fr");

// Allows you to search for a countries in relation to a country {name}
get("https://v3.football.api-sports.io/countries?search=engl");

And it is everything I could dream of. I will explain the details when we configure the connector, which we are ready to start right now.

First Half. Step 1: Create and Configure the Custom Connector

The goal is to give our Connector a name (which is easy) and set up an action command (which I will explain). Fire up Power Apps and create a new Custom Connector.

Give it a meaningful name, as we are going to use it later in our app. Now, make sure to update the Host input field information. Can you remember what it was for us? Yes, it is v3.football.api-sports.io.

On the Security tab, pick API Key as your method of authentication.

Another important detail here is the Parameter name, which I found in the API documentation as well. Make sure to use x-apisports-key here. Other parameters are not that important in our case, and you can fill in the blanks following my example.

The Definition tab is where we are going to tell our connector how to get the list of countries we need. Just so you are aware, we can define multiple actions here, such as getting a list of teams from a specific league, getting full info about a favorite team, getting the latest match statistics, and so on. That is why it is important to have a meaningful action name and Operation ID (no spaces, please), as this field will be used later in our app.

We are so close to being done with the configuration, but our connector still does not know how to properly get the list of all the countries. We have to import from a sample. Remember this endpoint?

// Get all available countries across all {seasons} and competitions
get("https://v3.football.api-sports.io/countries");

This is our sample. See and repeat after me: since it is a data-retrieval operation, I pick the verb GET, and for the URL, I provide the full countries endpoint link https://v3.football.api-sports.io/countries. And that is it, click the Import button.

Just to keep it simple today, I will not go into parameter details, but to be safe, I will add a default response to my action definition. Why? So we can describe our future API response, which usually comes in the form of JSON. This will guard us against any unstructured returns. Let me show you a little trick here.

Where do we find the response sample? On the same page where we found the endpoints. https://www.api-football.com/documentation-v3#tag/Countries/operation/get-countries

{
  "get": "countries",
  "parameters": {
    "name": "england"
  },
  "errors": [],
  "results": 1,
  "paging": {
    "current": 1,
    "total": 1
  },
  "response": [
    {
      "name": "England",
      "code": "GB",
      "flag": "https://media.api-sports.io/flags/gb.svg"
    }
  ]
}

I promised you a trick. Look at how the 'response' property gives us an array of objects where each object represents a country with a name, code, and flag. You will need this very soon!

Time to add the default response and paste that JSON code.

We have almost everything we need right now, and we are ready to jump from the Definition tab to Test.

I will create the Connector. Is something missing? What about the API key we were so protective of? You will add it right here. Create a new connection and paste your key!

You can always test your Connector inside the wizard, but I have no patience at the moment, so let us head straight to step 2!

Second Half. Step 2: Add Connector to App and Start Using It

I will create a simple Power App with the sole goal of testing my shiny new Connector. This is something you can easily handle yourself.

The first thing I will do is add the Connector as a data source in the Data tab. This is where having a meaningful name plays its role.

What is the fastest way to test it? A good old button! Insert one and start typing this into the OnSelect property: DemoSoccerAPIConnector.GetCountries();

Here is your pattern: ConnectorName.ActionName()

Click the button, get back to your action name, and see how it magically fetches the data for us. I can spot 171 items in my results. What about you?

But let us continue and visualize this properly. We are not going to serve our users raw data, after all.

Would you agree that a standard gallery makes sense here? Would you also agree that it makes total sense to store our data in a Collection after clicking the button?

Let us change the button OnSelect property like this: ClearCollect(colCountries, DemoSoccerAPIConnector.GetCountries().response);

Can you guess why .response is at the end? Going back to the trick I promised you, we spotted that the array of objects (our countries) is stored inside the response property. So we simply pass that array directly to our collection with its name, code, and flag.

All I really have to do now is add a gallery, use colCountries for the Items property, click the button, and voila!

Goal

I am going to stop here so you can take a moment to appreciate what you have built. I will let your imagination lead you from here, and I am happy to share how I built the rest if you want to know.