Create a Microsoft Power App for your ASP.NET Core Web API

Boost your developer journey by easily creating front ends for your web APIs.

Low-code tooling is becoming increasingly popular among developers because it allows them to create applications faster and with less code. In Visual Studio 2022 17.6 preview 2, you can now connect to the Microsoft Power Platform via connected services and create custom connectors based on your ASP.NET web API. You can download the latest preview at Visual Studio Preview.

In today’s blog post, we will cover prerequisites, how to create the custom connector from within Visual Studio and how to quickly build a front-end using Microsoft Power Apps.

Prerequisites

• Visual Studio 2022 version 17.6 Preview 2 or later with the ASP.NET and web development workload installed. You need to be signed into Visual Studio to create and use dev tunnels. The feature isn’t available in Visual Studio for Mac.
• An ASP.NET Core Web API project
• A Microsoft Power Platform environment. More information: Create a developer environment.

How-to create a custom connector for Microsoft Power Platform

1. For our connection to work, we will have to use or create an NET Web API project in Visual Studio. For my example, I am using the generic ASP.NET Web API weather template:
2. In Solution Explorer double click on Connected Services and click on + in Service Dependencies.
3. Next, I am adding Microsoft Power Platform as a Connected Services. The connection will ask you to define the following configurations:

• • Select a Power Platform environment. Note: If you don’t have a Power Platform environment available, you can easily create a developer environment to get started with.
  • Select or create a new custom connector
  • Create or select a dev tunnel with the following configurations:
    • Tunnel type: Persistent
    • Access type: Public

Note: Visual Studio leverages dev tunnels feature to expose your local running API to a public endpoint. It means you can use Power Apps with your API running in your local environment.

After you hit the Finish Button, you are now Connected to the Microsoft Power Platform. As soon as you hit F5 or the Play Button, a custom connector will be created in the Power Platform environment you selected earlier. Go to Microsoft Power Apps to see your custom connector and create a front end.

Note: As soon as you close the solution and reopen it, you should enable the tunnel again.

Create a mobile app by using Power Apps and integrate with your ASP.NET web API

With your web API running locally, you are now able to quickly create a Power App using Microsoft Power Apps:

1. Open Microsoft Power Apps and select your environment where you created your custom connector in:
   
2. Next, we will + Create a new Blank Canvas App and select Phone as our layout.
3. Then, we will add our custom connector to our Power App via the Add data button and search for our custom connector name.
4. We will continue by inserting a Button. In the menu, select Insert > Button. Drag and drop the button to the bottom of the form. Change the Text to Load Data.
5. Add the following formula to the OnSelect property:ClearCollect(weatherCollection, WeatherSample_Connector.GetWeatherForecast())
6. In the menu, select Insert Vertical Gallery. Select the weatherCollection as the data source. Change the layout to title and subtitle.

Run the app and you are now able to see the results while running your web API locally. Once the web API is running in your development environment, you can debug in real time and even Hot Reload your code.

What’s next?

For detailed documentation, check out Visual Studio connected service (preview) – Power Platform | Microsoft Learn and Create a canvas app front end for your ASP.NET web API (preview) – Power Platform | Microsoft Learn. In the future, we will work on an integration with your CI/CD pipeline and Azure API Management. Let us know if you have any feedback or future support requests.

Feedback

Most of the updates that we will deliver in the future will be inspired by feedback. You can share feedback with us via Developer Community: report any bugs or issues via report a problem and share your suggestions for new features or improvements to existing ones.

You can also leave a comment here or reach out to [email protected]. Or you can reach out to Julia on LinkedIn @jukasper.

Happy coding.