Create a canvas app front end for your ASP.NET web API (preview)

[This article is pre-release documentation and is subject to change.]

Power Platform enables web API developers to quickly build mobile or web applications using a Power Apps canvas app as a front end. With the Power Platform connected service in Visual Studio 2022, ASP.NET web API developers can easily create a custom connector for use with Power Apps and Power Automate.

You can use Visual Studio dev tunnels to create a canvas app before you publish your API to a public endpoint. Dev tunnels create an ad-hoc connection between your web API running locally and your Power Apps. You can use them to locally test and debug your web API in the context of the Power Platform in real-time (inner loop).

This tutorial uses the sample ASP.NET Weather web API to add a connection to a canvas app. It's based on the Create a web API with ASP.NET Core tutorial.

Prerequisites

• Visual Studio 2022 version 17.6 Preview 2 with the ASP.NET and web development workload installed. You need to be signed in to Visual Studio to create and use dev tunnels. The feature isn't available in Visual Studio for Mac.
• A Power Platform developer environment with permission to create custom connectors

Create an ASP.NET project in Visual Studio

1. Create an ASP.NET Core web API project.
2. Select Next.
3. Enter WeatherSample for the Project name, and then select Next.
4. Select Create.

The WeatherSample project contains an example controller for a RESTful HTTP service.

Add Power Platform as a connected service

1. In Solution Explorer, right-click the Connected Services node and select Manage Connected Services from the context menu.

2. In the Connected Services tab, select the + icon for Service Dependencies.

3. On the Add dependency dialog, type Power Platform into the search box.

4. Select Microsoft Power Platform, and then select Next.

   If you aren't signed in already, sign into your Microsoft Power Platform account. If you don't have a Power Platform account, Create a Developer Environment.

5. In the Connect to Microsoft Power Platform screen: select your developer environment.

6. In Custom connectors name, the value WeatherSample_Connector should already be set.

7. In Select a public dev tunnel, select the + icon.

   1. In the field Name, type SampleTunnel.
   2. Select Tunnel Type: Persistent.
   3. Select Access : public.
   4. Select OK.

8. Select Finish

9. Once the connected service is configured, select Close.

Create a canvas app with the custom connector

When Visual Studio runs a web app and a tunnel is active, the web browser opens to a tunnel URL instead of a localhost URL.

1. Run your Visual Studio solution and start debugging.

2. When the browser opens, a warning page opens with the first request sent to the tunnel URL. Select Continue.

3. With the web API running, open Power Apps in a new browser tab.

4. Select your developer environment in the upper-right corner.

5. Create a blank canvas app with Phone as the format.

6. In the top menu, select Add data.

7. Search for and select the WeatherSample_Connector, and then select Connect. More information: Add connections to your canvas app

8. Insert a button and drag it to the bottom of the form.

9. Change the button Text to Load Data.

10. Enter the following formula in the button's OnSelect property:

    ClearCollect(weatherCollection, WeatherSample_Connector.GetWeatherForecast())
    

11. Insert a vertical gallery

12. Select the weatherCollection as the data source, and then change the layout to Title and subtitle.

13. Run the app. It should look like the following example:

    

Debug your API

With your canvas app running, set a breakpoint and debug it. You can also use Hot Reload.

See also

What are canvas apps
How to use dev tunnels in Visual Studio 2022 with ASP.NET Core apps