Low Code: Using Custom Connectors in Power Apps to pull data from existing APIs
This story takes you through the process of setting up your first Custom Connector with Power Apps and pulling data from an existing API. This assumes the reader has access to make.powerapps.com and is able to create a Custom Connector. The reader of this article also needs to understand Postman and creating a collection and request.
Please note: Before the reader rolls this app out they need to understand that using a custom connector will make the app a premium app and you will incur fees if you publish and have users of the app. You can develop the app without fees.
This story will explain helps you resolve the “Custom Connector in Power Apps returns boolean” rather than your desired data.
Exporting Postman Definition
To start open your Postman app and the collection for the API you would like to work with PowerApps. In this example I created a collection labeled “PowerAppsGolf” and create a request called “Show Players”. The Show Players POST request will pass in a key value pair and get a response back with a list of names and ages of players.
Click on the “PowerAppsGolf” item under My Workspace and then click on the ellipsis to show the menu options for this collection. Select “Export” from the menu list
This will take you to the screen to select the export format. Leave the default selection of “Collection v2.1” and press the “Export” button
Save the json file that Postman exports to a location where you will be able to easily retrieve it.
Defining a new Custom Connector
We will start by logging into https://make.powerapps.com. When you reach make.powerapps.com you will click on the “Dataverse” on the left hand menu and then select “Custom Connectors”
Then you will press the “+ New custom connector” dropdown and select “Import a Postman collection”
Then you will need to name your connector, in this example we will name it “RyderDataConnector2” and then press the “Import” button to select the json file we exported from Postman in the previous step. After the collection information has been populated press the “Continue” button.
This will take you to the Connector Workflow “General” screen. Click on the “3. Definition”
Scroll down in the window until you reach the “Response” section and then click on “+ Add default response”
Add a Response to the message, the easiest way to do that will be by importing a sample. This can be done by clicking on the “Import from sample” button and then pasting in the example response into the Body section. The response can be pulled from your postman response. Then press the “Import” button.
This will now create two fields in the Body section on the response page labeled “name” and “age” that you can see in the screen shot below.
Then you can press the “√ Create connector” link at on the top bar. After Connector is created you can start using it.
If you are having an issue with this connector not showing data and only showing a boolean you likely forgot to define the response body.
Test your connector
Start preparing for the test by clicking on the “5. Test” link in the workflow and then create a “+ New connection”
This will prompt you to create a new connection for the custom connector you defined in the earlier step. Press the “Create” button.
Unfortunately the workflow will take you to the “Connections” screen after this is complete.
You will have to navigate back to the “Custom Connectors” and select the “Edit” button for the connector you created order to complete the testing.
This will take you back to the General workflow page. Click on the “5. Test” workflow and now populate the input parameters for your API. In my example I am populating the key value pair that my API takes as input. Your API may take different types of input. Then Press the “Test Operation” button
If your API call is successful you should receive the message response back. This should populate both the Headers and Body section of the response along with the Response Status of 200. This means your call was successful.
Using your new Custom Connector
Now that we have a new custom connector and a new connection made we can start using the API through our PowerApps. This example will walk you through how to create an App and a Simple view screen for the API
Start by clicking on the “Apps” icon on the left menu bar. This will show you a list of your existing apps. In this example we will create a new app. Do this by clicking the “+ New app” button
Populate the App Name, select phone and then push the “Create” button
Click on the Data icon on the left menu bar
A blank list of data objects will appear. Click “+ Add data” then select your new “Connectors”, in our example it is “RyderDataConnector2”
After you select it once, it will filter down the list and you will need to click on it a second time.
We will then navigate back to the “Tree View”, Select the “App” in the Tree view section and then select the Function “OnStart”. At that point you will populate the function value for OnStart.
The value for the OnStart function is in the code snippet below
ClearCollect(ryderDataCollection2, PowerAppsGolf.ShowPlayers({key: “tournamentId”,value: “shanks1”,type: “text”}))After you populate the OnStart function with a value, you will need to run the OnStart. This can be done by selecting the App in the Tree view and then pressing the ellipsis and selecting “Run OnStart”. This will execution the function and create a new collection called “ryderDataCollection2”.
Now we can verify the collection returned values. This can be done by clicking on “View” header menu and then the sub menu of “Collections”
If the collection was created correctly you should see your API response here. After you verify your data press the “←” on the left.
Now we will need to insert a gallery which will display the data in the PowerApp. To do this press the “Insert” header menu and then press the “Gallery” drop down. In this example we will select the “Vertical” gallery, although you can select any one that you would like.
The Power Apps builder will then prompt you to “Select a data source”. We will want to select the data source to be “In your app” and select the collection we just created in the “OnStart” function. This collection is named “ryderDataCollection2”. If you did not run the “Run OnStart” the collection will not be created and populated with data. If you did execute this step you should see your new collection name “ryderDataCollection2”.
After you select the collection the screen should now show the data retrieved from your API.
I hope this article helped you establish your first of many custom connectors with PowerApps. Please let me know if you run into issues following this article and I’ll modify to help future readers.
Jason DeLano
