Join our Discord server for community support and discussions

Building Apps for MS Teams in C# and XAML with Uno Platform

10 Jan 2023

In this blog, we’ll explore how Uno Platform and WebAssembly make it possible to develop apps for Microsoft Teams using C# and XAML. And how they can help streamline your workflows, automate tasks, and bring new capabilities to your team.

By the end of this tutorial, you will have a simple sample app running in web version of Microsoft Teams, similar to our Getting Started tutorial. (Create a Single Page App with Uno Platform)

Prerequisites

1. Visual Studio 2022 includes built-in support for Microsoft Teams and provides useful starter templates, but they are not installed by default with any workloads. Instead, we need to select them in the Visual Studio Installer manually.

Open the Visual Studio Installer and click Modify on your favourite Visual Studio 2022 instance. Next, select the ASP.NET and web development workload and then find and check the Microsoft Teams development tools option in the Installation details pane.

2. While you can technically test your Microsoft Teams on your production tenant, creating a developer account in the Microsoft 365 Developer Program is preferable. First, go to the official website here and click Join. Next, log in using your Microsoft or company account and fill out the requested information. When successfully logged in, click the Set up E5 subscription button. This will provide a free sandbox to test and verify your apps.

3. We need to host the Uno Platform under ASP.NET app host. This capability was added in the latest pre-release versions (4.6 and newer) of Uno Platform templates, which you can install via the command-line

				
					dotnet new install Uno.ProjectTemplates.Dotnet::4.6.19

Creating the Microsoft Teams App Project

Open Visual Studio and create a new project. In the second (platform) drop-down, choose Microsoft Teams. You should see a single template:

Double-click the template, give the project a name and click Create.

In the following dialogue, we can select a type of Teams project we want to create. We want to build an app with a user interface, so we choose Tab and again Create.

Now that our Teams project is created, we will add an Uno Platform app to the solution.

Right-click the solution in Solution Explorer and select Add – New Project. Then, in the dialogue, switch the second drop-down to All platforms and the third drop-down to Uno Platform and double-click the Uno Platform App project.

Name your Uno Platform app and click Create. In the dialog that displays we will keep on WinUI and WebAssembly options for simplicity. Click Create once more and your solution should now be all set up!

Referencing Uno App from Teams App

Currently our solution contains two completely separate projects – the Uno Platform app (consisting of a Shared project, a WebAssembly project and a WinUI project) and Microsoft Teams Host app. We now need to reference the Uno Platform WebAssembly app from the Teams app so it is then served by this ASP.NET host.

First right-click the Teams project and select Add – Project Reference. In the dialog check the YourAppName.Wasm project and click OK. Now right-click the Teams project again and choose Manage NuGet Packages…, search for the Uno.Wasm.Bootstrap.Server package and install it.

This package is capable of serving Uno Platform WebAssembly app from ASP.NET host.

Open the Program.cs file and adjust it as follows:

				
					using Uno.Wasm.Bootstrap.Server;

...

app.UseAuthentication();
app.UseAuthorization();

app.UseUnoFrameworkFiles();
app.MapFallbackToFile("index.html");

app.UseEndpoints(endpoints =>
{
    //endpoints.MapBlazorHub();
    //endpoints.MapFallbackToPage("/_Host");
    endpoints.MapControllers();
});

app.Run();

We have added UseUnoFrameworkFiles and MapToFallbackFile middleware and commented out the Blazor-related endpoints which we don’t currently need.

First Launch

Let’s finally see the app in action! Right-click the Teams project in Solution Explorer and select Teams Toolkit – Prepare Teams App Dependencies. In the dialog, log in using your Microsoft 365 Developer Program account and confirm. This will set up all the required manifest values for your app and register it against the Microsoft 365 tenant.

All set! Set the Teams project as startup project and press F5 or click the green arrow to start the app! This will launch the browser, where you can log in to the Microsoft 365 tenant and you will be presented with a pop up to install your new app.

After we click Add the app will load right away:

What's Next?

The current limitation of the app is that it does not run on the Microsoft Teams Electron client, which prevents the full potential of building Teams applications in C# and XAML. If this issue can be resolved, it would significantly enhance the capabilities of creating custom apps. If you want to see this happen, please consider upvoting the feedback on this topic.

The current app is a basic version and has not yet utilized any specific Microsoft Teams features. The next step is integrating authentication via MSAL, allowing access to the Microsoft Graph and allowing the app to work with user data directly. Additionally, it’s possible to utilize the current user’s credentials by communicating with the underlying JavaScript Teams API via the WebAssemblyRuntime class.

From setup to the basics of getting started, Martin Zikmund takes you through the steps to be able to build apps for Microsoft Teams with Uno Platform.

To simplify this process, Martin plans to port the Microsoft Teams .NET SDK to Uno Platform, making it much easier to access all user capabilities without manually implementing the bridge. So keep an eye out for this.”

Check out the original post on his blog and his sample code.