Exploration: Create Swagger API and Consume It In Canvas-Apps

Today we will learn how to create Swagger API > deploy it to Azure (App Service) > make custom connector > use it in Canvas Apps. Without further ado, let’s make it!

Create API

First, we need to open your CMD line, then set the CMD (using CD command) to the directory where you want to create the folder. Once you are already in the folder that you want it, run the below command (you need to have dotnet installed):

dotnet new webapi -o BlogApi

By default, the CLI will help you to generate WeatherController. I will remove all the things that are related to the WeatherController and make the below Controller:

using Microsoft.AspNetCore.Mvc;

namespace BlogApi.Controllers;

public class Todo
{
    public Guid Id { get; init; } = Guid.NewGuid();
    public string? Name { get; set; }
    public string? Description { get; set; }
    public bool IsCompleted { get; set; }
}


[ApiController]
[Route("[controller]")]
public class ToDoController : ControllerBase
{
    private static readonly List<Todo> Todos = new[]
    {
        new Todo { Name = "Task 1"},
        new Todo { Name = "Task 2"},
        new Todo{ Name = "Task 3"}
    }.ToList();

    private readonly ILogger<ToDoController> _logger;

    public ToDoController(ILogger<ToDoController> logger)
    {
        _logger = logger;
    }

    [HttpGet("/ToDo/GetAll")]
    public Todo[] Get()
    {
        return Todos.ToArray();
    }

    [HttpGet("/ToDo/Get/{id}")]
    public Todo? GetById(Guid id)
    {
        return Todos.FirstOrDefault(x => x.Id == id);
    }

    [HttpPost("/ToDo/Create")]
    public void Create(Todo todo)
    {
        Todos.Add(todo);
    }

    [HttpPost("/ToDo/Update/{id}")]
    public bool Update(Guid id, Todo todo)
    {
        var found = false;
        foreach (var item in Todos)
        {
            if (item.Id != id) continue;

            item.Name = todo.Name;
            item.Description = todo.Description;
            item.IsCompleted = todo.IsCompleted;

            found = true;
        }

        return found;
    }

    [HttpDelete("/ToDo/Delete/{id}")]
    public void Delete(Guid id)
    {
        var todo = Todos.FirstOrDefault(x => x.Id == id);
        if (todo == null) return;

        Todos.Remove(todo);
    }
}

Then you need to update the Program.cs:

using Microsoft.OpenApi.Models;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new() { Title = "BlogApi", Version = "v1" });
});

var app = builder.Build();

app.UseSwagger(c => c.SerializeAsV2 = true);
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "BlogApi v1"));

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

Once all of this is settled, we can try it in our local and publish it.

Publish The API

From Visual Studio > Project > right-click > Publish:

First, you will be asked where you want to publish it. Because we will publish the API in the Azure API Service, you need to have the account. Then you can select “Azure” as our Target:

You will be asked to select your specific target and you need to choose “Azure App Service (Windows)”:

In the next dialog, make sure you select your correct Azure Account (if not, you can login to your Azure there) > you can create the App Service > create a name for the App Service > select Subscription name > select the Resource Group (or create it) > select the Hosting Plan > create:

On the App Service dialog, you need to confirm what is the Azure Components that will be used:

In the next part, you can create API Management to make your API more secure. But for this demonstration, I’ll skip this part and click the Finish button instead:

You can Add API Management to hardening the security of you App Service

Once the API Service is ready, you can navigate to the generated URL and go to <api-service-url>/swagger/index.html and you will see this:

You need to go to <api-service-url>/swagger/v1/swagger.json:

After the page is opened, you can press ctrl+save to download the swagger.json to be used in the next step.

With this, our API is ready!

Create Custom Connector In PowerApps

You need to go to Dataverse blade > Custom Connectors > New custom connector > Import an OpenAPI file:

Once you click that one, you need to name your Connector name (I named it Swagger Todos) and select the swagger.json file that you download earlier. Then you can press the Continue button:

On the General Information tab, you need to define the Scheme, Host, and Base URL. Here is my setup:

For the Security part, because I don’t add anything (you should add something when you deploy it to production for hardening your security!), you can set it as No authentication.

On Definition, you need to define the Summary, Description, and Operation ID for each of the actions. I named it based on the action that I define in the API (GetAll, Get, Create, Update, and Delete):

Set the Summary, Description, and Operation Id for each Actions

We can skip the Code (Preview) tab. Once we skip this, the system will automatically create a Connection for us. Then we can go back to our Custom Connector and Test it:

With this, our Custom Connector is ready!

Create Canvas Apps And Test 1 Action

The next step is we can go to Apps blade > New App > Canvas Apps from blank > give a name for the app > click the Create button:

Once the app is created, we can go to Data blade > Add data > search your Custom Connector name (Todos) > then click the Connector (the system will add the Connector to the App):