How to create a Custom Connector for your Power App

While the Power Platform provides a large number of connectors out of the box and available to use, there will be times when you need to connect to a data source that does not have a connector available.

That’s not a problem though, as the process to create a custom connector has been greatly simplified and in many cases it does not require any custom coding. More power to the Citizen Developer.

Let’s look at an example.

The data source to be used in an open API provided by Open Topo Data. This is an API that provides elevation and ocean depth for a specified latitude and longitude. You can simply click on the URL below to see the results returned:

https://api.opentopodata.org/v1/test-dataset?locations=56,123

image

Note that this API does not require authentication.

First off, let’s start by creating our custom connector, and later we’ll look at how to use it in a basic app.

Creating a custom connector

We’ll start from the Power Automate interface. Navigate to flow.microsoft.com

Here, expand the Data section, and find the Custom connectors option, as seen below.

image

Select to add a New custom connector, and choose the Create from blank option.

image

First step asks you to give the connector a name. I’ll call it OpenTopoDataConnector, but you can use any name you want. Click Continue to start the creation wizard.

image

Here, populate a background color if you intent to change the default, and give a description for your connector.

We are not connecting to an on-premise data source, so we don’t need to use a data gateway. We’ll leave that unchecked.

For the Scheme definition, and based on the URL provided above, we use HTTPS. The host will be api.opentopodata.org and for Base URL we’ll use the /v1

image

Click on Security to move on to the next step. Since there is no authentication needed for this API, we’ll leave it at No authentication. You could use Basic Authentication, API Key or OAuth 2.0 as needed, but again, not necessary in this example. Click on Definition to move on to the next step.

image

On this configuration step, we need to add an Action. This describes the operation taking place.

In the General area, give a Summary and a Description, and then complete the Operation ID. It will look like so:

image

For the Request area, select Import from sample. The quick edit window that open up has some specific configurations. This particular request is a GET request, so select GET, and complete the URL and Headers as follows:

image

Select Import when done, and watch the additional details populated.

image

For the Response area, select Add default response, and populate the quick edit form with the response format and Headers. You should really be using Postman here to get these details. This is the output in Postman that give you the information required:

image

And your filled-in values look like so:

image

In this particular case, you will get a validation error, but you can ignore that. Seems like this API does not abide by the same best practices this tool is checking for.

image

Save (or Update) the connector, and click on Test to validate your configurations.

On the Test operation, select New connection and one will be generated for you.

In the Operations area, enter coordinates (-45,162) and Content-Type application/json and select Test operation.

image

The output of your test will look like so:

image

Select Update connector again to make sure it’s all saved and ready. Now we have a custom connector we can use in a Power App.

Creating a Power App that uses our custom connector

For the sake of simplicity, I will not go through adding elements and formatting the app look and feel. Be creative there, sky’s the limit. This is a canvas app, so you can skin it whichever way you want.

On the View tab, select Data sources to open the Data panel (or open it from the side), expand the Connectors are and choose the connector we created earlier.

image

Note that is a Premium connector… chiching!

The essential elements needed on the app are a text field, a button a label to display the result. The app will look like so (I know, not the most pretty one):

image

The text field only captures the coordinates provided, so no work is needed there unless you want to rename the field.

On the button you add the following formula:

ClearCollect(elevationsCollection, OpenTopoDataConnector.testdata({locations:txtCoordinates.Text}))

We start with ClearCollect to clear the content of the collection we named elevationsCollection. The second parameter is the name of the connector and the method, while passing the data in our text field.

This refreshed the collection that holds the response details.

Note that I did rename the original text field to txtCoordinates

On the label, we need to make it display the elevation. The formula is:

First(First(elevationsCollection).results).elevation

I’m using First here to get the first element of a table. The returned data is basically a Table within a Table, so we do First twice, for each result, and within the results for the elevation.

And your running app will display like so:

image

You should probably add some validation, as supported values to pass to the API include Latitudes between –90 and 90, with Longitudes between –180 to 180. That’s a good homework! Anything outside of these ranges will result in an Invalid Request status. Here’s where Postman comes in handy to see all details and error messages and statuses.

Was this helpful? Let me know!

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 )

Connecting to %s

A WordPress.com Website.

Up ↑

%d bloggers like this: