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:

Right click the Project > 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:

Select Azure

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

Select 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:

Create API Service

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

Confirmation Dialog

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:

Swagger API is ready to be tested

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

Swagger metadata

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:

Create Custom connectors

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:

Create our custom connector

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

General information 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 SummaryDescription, 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:

Testing our API

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:

Create the App

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):

Add Custom Connector to the App

Once we got this Connector added, we can use it already. I add a Table (Preview) component and 1 button.

On the Button.Select, this is my code:

Set(TableApi, BlogApi.GetAll())

Then on the Table.Items, I bind the variable I created earlier:

TableApi

After that you can define the columns that you want to show and here is the final result:

The result

Happy trying!

One thought on “Exploration: Create Swagger API and Consume It In Canvas-Apps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.