Leverage collaboration between PowerApps and Azure API Management - No.1 setup "custom connection"
Published Feb 08 2022 01:43 PM 3,592 Views
Microsoft

Power Platform empowers "citizen developers" to accelerate their business. There are lots of demands for their businesses, and there is especially a strong demand for integrating and leveraging existing APIs. While major SaaS services have disclosed their available APIs, most of their existing systems do not disclose the APIs to leverage their systems. Power Platform can leverage existing systems via Web API using "Custom Connectors", but first step for this use case is to expose existing systems as Web API.

daisami_0-1644355591697.png

"Citizen developers" can develop a wide variety of applications on low-code platform to suit their own business and leverage existing systems if the systems can be made available via Web APIs. This is a part of series posts like the following:

 

In most cases, it will be required to build up additional components when existing systems haven't offered usable APIs. IT departments should collaborate with citizen developers how to expose as Web API - specification, versioning, authentication, authorization, or others. This is different way from traditional usage, but this collaboration will offer much values with flexible activities across departments.

daisami_1-1644355639893.png

 

At the beginning, citizen developers and IT departments have to consent  which features or data are required and specifications for Web APIs. It's hard to read or write JSON/YAML directly, so it should be easy to define such specifications if IT they will exchange such info as Swagger.

 

Microsoft Azure has offered API Management for this case. You can publish your Web API securely, monitor the usage or lots of benefit by using API Management. Refer to API Management overview article for the details. Through this post, you can expose your existing systems as Web APIs for Power Platform with API Management by following steps below.

  1. Publish your Web API on Azure App Service
  2. Configure your Web API on API Management
  3. Setup new custom connector on Power Platform Studio
  4. Leverage your Web API on Power Apps with custom connector

 

1. Publish your Web API on Azure App Service

Let me assume that we have already published a Web API on Azure App Service by enabling Swagger. It's quite easy to setup, because you just need to create a ASP.NET Core Web API project on Visual Studio. This article should be helpful to follow the steps.
https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-6.0&tabs=visual...

The template project enables Swagger on only development environments, so remove the syntax below, between 13 and 17 lines, in Program.cs when you would enable Swagger on your App Service env.

 

 

 

 

 

 

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

 

 

 

 

 

 

 

Access swagger URL on your ASP.NET Core API - such like https://localhost:7155/swagger/index.html. You can acquire a swagger JSON file for your Web API from the link below.

 

daisami_1-1644355977384.png

Publish your ASP.NET Core Web API on Azure App Service by following this article.

 

2. Configure your Web API on API Management

Now, I believe you have already acquired a JSON file for your Web API. Choose "OpenAPI" among "Create from definition" items to utilize your JSON file.

daisami_2-1644356097392.png

Select your swagger JSON file here, so your API definition on API management will be automatically generated. Next, you need to specify endpoint for your Web API on App Service. Choose "HTTP(s) endpoint" and put your App Service endpoint - you can also setup this endpoint in "Settings" tab.

daisami_3-1644356111726.png

Now, it's ready to call your API via API Management. Open "Test" tab and Click "Send" button, so you should receive API results.

daisami_4-1644356131171.png

 

It's required to download Open API JSON file for Power Platform "custom connectors". Click your generated API and choose "Import".  Note that Power Platform "custom connectors" require "Open API v2" as of Feb 2022 - not Open API v3 YAML/JSON.

daisami_5-1644356166143.png

Pick up a subscription key on your API Management to create "custom connectors" on Power Platform. Open "Subscriptions" tab on your API Management and pick up primary or secondary key to utilize on Power Platform.

daisami_6-1644356184522.png

 

3. Setup new custom connector on Power Platform Studio

A citizen developer can utilize your Web API. Open Power Apps Studio, choose "Custom Connectors" among left items, and create new custom connector with "Import and OpenAPI file".

daisami_7-1644356253935.png

You just need to follow wizard and create new connector on "5.Test" step first. Put your API Key which you have picked up on your API Management here.

daisami_8-1644356268472.png

You can find your connection on "Connections" menu after creating new connection.

daisami_9-1644356282820.png

 

Go back to your custom connector among "Custom Connectors" menu. Now, you can execute "Test operation" on "5.Test" step.

daisami_10-1644356295630.png

Now, you are ready to leverage your Web API on Power Platform!

 

4. Leverage your Web API on Power Apps with custom connector

Now, you are ready to create new Canvas App on Power Apps. Create your apps as "Bank app" and add your custom connector on Data.

daisami_12-1644356366135.png

Put "Vertical gallery" component on your canvas and you will find some error icons, so you need to edit formulas to fix the errors.

daisami_13-1644356380684.png

Update your formulas by following below.

daisami_14-1644356394193.png

Now, you can retrieve your Web APIs on Power Platform like below.

daisami_15-1644356409418.png

 

In next post, we will publish Web APIs via Developer Portal on API Management, so you can make ecosystem with your APIs for citizen developers.

Version history
Last update:
‎Jul 13 2022 05:16 PM
Updated by: