Connecting Custom Data in Canvas Apps

1. What is a Custom Connector? A Quick Refresher

Before we consume a connector, let's briefly clarify what it is. Standard connectors (like for SharePoint or Dataverse) are pre-built "wrappers" that Microsoft provides for popular services. A custom connector is a wrapper that you build yourself for any REST API that doesn't have a standard connector.

It defines key aspects of an API so that Power Platform can understand how to communicate with it:

• General Information: Host URL and base path (e.g., api.weatherapi.com).
• Security: The authentication method (e.g., API Key, OAuth 2.0).
• Definition: The specific operations (actions) the API supports, like GET /data or POST /users, including their parameters and expected response schemas.

To quickly see what this looks like, the following video offers a great high-level introduction.

2. The Process: From Connector to Canvas

Consuming a custom connector in a Canvas App follows a logical, four-step process that will feel familiar from your programming experience:

1. Add the Data Source: Add the custom connector to your app, creating a connection to the target API.
2. Call the Action: Use a Power Fx formula to invoke a specific action defined in the connector (e.g., get weather data).
3. Process the Response: Store the data returned by the API call in a variable or a collection.
4. Display the Data: Bind UI controls (like labels or galleries) to the stored data to display it to the user.

Let's walk through this process with a hands-on example.

3. A Practical Walkthrough: The Weather API

We will use a video that demonstrates connecting to a simple public weather API. This example clearly shows all the steps from creating a simple connector to consuming it in an app. While you will watch the whole process, pay closest attention to the second half, where the focus shifts to the Canvas App.

4. Deconstructing the Power Fx Formula

As you saw in the video, the key step is writing the Power Fx formula. Let's break down the pattern used:

// The action is triggered, for example, by a button's OnSelect or a dropdown's OnChange
Set(
    varTemperature, // Create a global variable named varTemperature
    'Interactive weather API connector'.GetWeatherData({q: Dropdown1.Selected.Value}).current.temp_f
);

Let's analyze this line by line:

• Set(varName, value): This is a Power Fx function that sets the value of a global variable. This is analogous to assigning a value to a variable in C# or JavaScript.
• 'Interactive weather API connector'.GetWeatherData(...): This is the call to the connector. The syntax is 'ConnectorName'.ActionName(parameters). IntelliSense will guide you here once the connector is added to your app.
• {q: Dropdown1.Selected.Value}: This is the parameter being passed to the GetWeatherData action. The connector's definition specified a parameter named q, so we provide it as a record. The value is taken from the selected item in the dropdown control.
• .current.temp_f: After the function call, we use dot notation to navigate through the JSON object returned by the API to extract the specific value we need—in this case, the temperature in Fahrenheit. The ability to do this depends on having a well-defined response schema in the connector's definition.

The Microsoft Learn documentation provides another excellent example of this process. It uses a different API (Cognitive Services for sentiment analysis) and a slightly different pattern for storing the result, which helps to generalize the concept.

The key formula from that article is:
ClearCollect(sentimentCollection, SentimentDemo.DetectSentiment(...).documents.score)

Here, ClearCollect first clears the sentimentCollection and then adds the new results from the API call. This is the preferred method when you expect a list of items and want to bind the results to a gallery or data table.

// OnChange of the dropdown or OnSelect of a button
Set(
    varCurrentWeather, 
    'Interactive weather API connector'.GetWeatherData({q: Dropdown1.Selected.Value}).current
);

// Text property of the label
"Current: " & varCurrentWeather.temp_c & "°C, Feels Like: " & varCurrentWeather.feelslike_c & "°C"

Conclusion

In this lesson, you've learned how to make your Canvas Apps significantly more powerful by consuming data from external REST APIs through custom connectors. This skill is a bridge between the low-code world of Power Apps and the limitless possibilities of backend services.

Key Takeaways:

• A custom connector acts as a proxy or wrapper around a REST API, defining its actions and data structures for Power Platform.
• To use a connector, you first add it as a data source to your Canvas App.
• You call connector actions using the Power Fx syntax: 'ConnectorName'.ActionName({param1: value1, ...}).
• It's best practice to store the API response in a variable (Set) for single items or a collection (ClearCollect) for lists of items.
• You use dot notation to navigate the returned object and extract the specific data you need to display in your UI controls.

Up Next:

Now that you can retrieve data from both standard data sources and custom APIs, the next logical step is to perform more sophisticated operations on that data within your app. In our next lesson, we will dive deep into Power Fx to implement complex formulas combining Filter, LookUp, and With functions for advanced scenarios.