What is Connector?
A connector is a proxy or a wrapper around an API that allows the underlying service to talk to Microsoft Power Automate, Microsoft Power Apps, and others.
A connector may provide tables of data or actions.
What are Connectors in PowerApps?
Connectors in PowerApps provide a way to establish a connection to a data source and allow us to use these in our apps.
There are primary two types on connectors.
1). Public Connectors
They’re also known as "built-in connectors" and are further categorized into
a. Standard Connectors: Standard connectors are connectors that are freely available for use. They are available across the entire Microsoft Power Platform, so they can be easily utilized in PowerApps, Power Automate and others. It is included with Power Apps per app plan and per user plan.
b. Premium Connectors: Premium connectors require additional licensing and are only available if you subscription plan.
2). Custom Connectors
Custom connector gives us the ability to use our own connectors. It enables your app to extend its capabilities by calling publicly available or a custom API.
Custom connectors are scoped to individual environments, this means that they are configured in the context of one environment and must be added to each environment to use them, so they are only available to apps and flows within that environment.
In this blog, we will be discussing on how to create a Custom Connector in PowerApps.
Introduction to tomorrow.io API
tomorrow.io is used to provide weather (forecast, maps, monitoring, historical data) reports with the help of an API. In this blog we will be using this API to get the real-time weather report.
Procure the tomorrow.io API Key
1). Sign up on https://www.tomorrow.io/ and create a free account.
2). Login and you will be able to see API key.
Testing the tomorrow.io API endpoint
3). Scroll down and click on "Realtime Weather" to test the API.
In the Language section: select language as HTTP.
In the Authorization section: API key will be pre-filled. The API Key is being sent as a query parameter in the URL.
In the QUERY PARAMS section: enter the required location parameter value (check below screenshot for location types). Click on "Try It!" button. You will get JSON response data with 200 OK status code.
As its a GET request- you can open the browser and test the API endpoint here also.
Creating a new Custom Connector
Now that we have obtained the API key and tested it successfully, we can proceed further to make our custom connector.
Open the Power Apps and select the environment in which you want to create the custom connector.
- Custom connectors are scoped to the environment level.
1). Sign in to Power Apps or Power Automate
2). Click on More > Discover All
Scroll down and click on Custom connectors option. You can also pin this.
3). Click on the New custom connector > Create from blank.
4). Enter a meaningful name for the custom connector, and then select Continue.
| Parameter | Value |
|---|---|
| Connector name | Weather Report |
Step 1: Update general details
On the General tab, do the following:
| Parameter | Description | Value |
|---|---|---|
| Icon background image | The background image that is used to display the custom connector icon (in PNG and JPG formats) | Select the custom connector icon of your choice. |
| Icon background color | The background color that is used to display the custom connector background color (in HEX format) | #64ccc |
| Description | The description will appear in the custom connector's details. | This connector provides an API for weather reports. |
| Scheme | The scheme identifies the protocol to be used to access the resource on the Internet. It can be HTTP (without SSL) or HTTPS (with SSL). | HTTPS |
| Host | The host name identifies the host that holds the resource API. | api.tomorrow.io |
| Base URL | The base path identifies the specific resource on the host that the web client wants to access. | / |
Step 2: Specify authentication type
Choose what type of authentication is implemented in your API.
1). On the Security tab, under Authentication type, select API Key.
2). Under API Key, specify a parameter label, name, and location. Specify a meaningful label, because this is displayed when someone first makes a connection with the custom connector. The parameter name and location must match what the API expects.
| Parameter | Value |
|---|---|
| Parameter label | API key |
| Parameter name | tomorrow-API-Subscription-Key |
| Parameter location | Query |
Step 3: Create the connector definition
In the definition section, we can define more than one action for our custom connector. Actions determine the operations that users can perform. Actions can be used to read, create, update, or delete resources in the underlying connector.
Create an action
In this blog, we will create an action that calls an API.
1). On the Definition tab, the left pane displays any actions, triggers (for Logic Apps and Power Automate), and references that are defined for the connector. Select New Action.
2). The General area displays information about the action or trigger that's currently selected. Add a summary, description, and operation ID for this action.
| Parameter | Value |
|---|---|
| Summary | Returns a real-time weather report. |
| Description | This API action allows us to return a real-time weather report by city name, latitude and longitude (decimal degrees), US zip code, and UK postcode. |
| Operation ID | GetRealtimeWeatherReport |
Set the Visibility property to important.
none: displayed normally in the logic app or flow
advanced: hidden under another menu
internal: hidden from the user
important: always shown to the user first
3). The Request area displays information based on the HTTP request for the action. It defines the pre-requirements needed in order to make a request. Select Import from sample.
4). Specify the information necessary to connect to the API, specify the request detail, and then select Import.
| Parameter | Value |
|---|---|
| Verb | Get |
| URL | https://api.tomorrow.io/v4/weather/realtime?location=shimla&apikey=yourAPIKey |
5). The Response area displays information based on the HTTP response for the action. Select Add default response.
6). Specify the response body (check testing endpoint API - inside browser), and then select Import.
7). The Validation area displays any issues that are detected in the API definition. Check the status, and then in the upper-right corner of wizard, select Create connector.
8). Newly create custom connector will appear under "Custom connector" like below
Step 4: (Optional) Use custom code support
This step is optional. You can complete the codeless experience of creating your connector by ignoring this step. Custom code can be used to transform request and response payloads.
Step 5: Test the connector
Now that you've created the connector, test it to make sure it's working properly.
1). Create new connection for this custom connector.
2). Enter your API key from the tomorrow.io API, and then click Create.
3). Now edit the custom connector and select the Test tab from the dropdown.
4). On the Test tab, select the connection created in step 1. Enter the location and apikey parameter, and then select Test operation button.
5). The connector calls the API, and you can review the response. If the request is successful, then it will return a JSON response with 200 OK status code.
Using Custom Connector in Canvas App
1) Sign in to Power Apps and choose the environment.
2) Create a new Canvas blank app.
3) Enter an App name "Weather Report - App" and choose the layout for the app.
4) Click "Create" to create a blank canvas app.
5) Once created, the app opens in Power Apps Studio for you to start configuring the app's functionality.
6) In the left menu, select the "Data" option to open the "Data" pane.
7) Select Add data source. Search "Weather Report" and select "Weather Report" our custom connector.
8) Click "Add a connection" or use an existing connection.
9) Now a data source will be added to the app.
10) Rename the default screen, "WeatherReport_Screen" and add Text input, Button and Label control.
The screen will look like the one below.
11) In the button "btn_GetWeatherReport" control, set the OnSelect property as below. The button control will get call the custom API.
GetRealtimeWeatherReport is the operation ID or the function to get weather report based on the city.
UpdateContext(
{
varCityWeather: WeatherReport.GetRealtimeWeatherReport(
{
location: txt_WeatherReport_CityName.Text,
apikey: "tomorrow-API-Subscription-Key"
}
).data.values.temperature
}
)
12) In the label "lbl_WeatherReport_Value" control, set the Text property as below.
If(
IsBlank(varCityWeather),
Blank(),
"Weather Report for '" & txt_WeatherReport_CityName.Text & "' is: " & varCityWeather & "° C"
)
13) Enter the city name in the textbox and click the button. Now you will get the current weather detail.
I hope this will help all of you! 🧲
Feel free to provide feedback.
🚀 "Happy Coding" 🚀
