Building an Application for Microsoft Teams with Blazor

Microsoft introduced support for implementing MS Teams applications in Visual Studio 2022 version 17.3. This blog walks you through the steps for creating a Microsoft Teams app in Blazor and integrating the Syncfusion Blazor component into it.

The Syncfusion Blazor component library offers over 70 responsive and lightweight UI controls for building modern web apps.

Let’s get started!

Prerequisites

Please refer to the Microsoft docs guide, with step-by-step instructions for installing workloads in Visual Studio, creating a Microsoft Teams tenant, and enabling sideloading to test the app.

Creating project for Tab app in Microsoft Teams

  1. Open Visual Studio 2022 and select Create New Project.
    Creation of a new project in Visual Studio 2022Creation of a new project in Visual Studio 2022
  2. Search for and select the Microsoft Teams app project template and click Next.
    Selection of Teams app from the project templatesSelection of Teams app from the project templates
  3. Configure the project with the required project name, select the location to save the application, and click Create.
    Configure the project name and locationConfigure the project name and location
  4. Select the type of Microsoft Teams application to create. We are going to create a Tab application.
    Select the type of Teams application to createSelect the type of Teams application to create
  5. Allow the application to load the dependencies. The project structure will look like the following screenshot.
    Structure of applicationStructure of application

Build and run the default Microsoft Teams application

  1. To configure the project with the Microsoft Teams application, right-click Project -> Teams Toolkit -> Prepare Teams App Dependencies.
    Configure the application with Microsoft Teams appConfigure the application with Microsoft Teams app
  2. Select the available Office 365 account or add the account to sign in. Click Continue.
    Select the Office 365 account to sign in to Microsoft Teams appSelect the Office 365 account to sign in to Microsoft Teams app
  3. After successful login to your Office 365 account, click Debug -> Start Debugging or F5 to run the application.
  4. Once the application is built successfully, the output window will appear with the MyTeamsApp application. Click Add in the created application.
    Newly created Microsoft Teams applicationNewly created Microsoft Teams application

Now, the application has been added to MS Teams as a Tab.

Microsoft Teams application installed
Microsoft Teams application installed

Integrate Blazor Syncfusion component in Microsoft Teams app

  1. To add the Blazor Kanban component to the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for Syncfusion.Blazor.Kanban, and install it.
  2. Open the ~/_Imports.razor file and import the Syncfusion.Blazor namespace.@using Syncfusion.Blazor
  3. Next, register the Syncfusion Blazor service in the Microsoft Teams application in the ~/Program.cs file.using MyTeamsApp1.Interop.TeamsSDK; using Syncfusion.Blazor; var builder = WebApplication.CreateBuilder(args); … builder.Services.AddHttpContextAccessor(); builder.Services.AddSyncfusionBlazor(); …
  4. To add a theme to the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for Syncfusion.Blazor.Themes, and install it. Then, reference the Syncfusion styles and scripts in the <head> of the ~/Pages/_Host.cshtml file in the application.<head> … <link href=”_content/Syncfusion.Blazor.Themes/bootstrap5.css” rel=”stylesheet” /> <script src=”_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js” type=”text/javascript”></script> </head>
  5. Now, add the Syncfusion Kanban control to the Razor page ~/Pages/Tab.razor of the application.@using Syncfusion.Blazor.Kanban @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications @using System.Collections.ObjectModel; @using System.ComponentModel; <div class=”col-lg-12 control-section”> <div class=”content-wrapper” id=”toast-kanban-observable”> <div class=”row”> <SfKanban KeyField=”Status” DataSource=”@ObservableData”> <KanbanColumns> @foreach (ColumnModel item in columnData) { <KanbanColumn HeaderText=”@item.HeaderText” KeyField=”@item.KeyField” AllowAdding=”true” /> } </KanbanColumns> <KanbanCardSettings HeaderField=”Id” ContentField=”Summary” /> <KanbanSwimlaneSettings KeyField=”Assignee”></KanbanSwimlaneSettings> </SfKanban> </div> </div> </div>
  6. Initially, the data is added to the application using an Observable Data Collection. To add new tasks to the application, enable the AllowAdding property. Then, clicking the + icon will display a dialog with the required fields to add new tasks.
  7. To edit or delete an existing task, double-click on it. Add the following code snippets to the Razor page to implement different functionalities in the Kanban control like drag and drop, add new task, delete tasks,and update tasks.public ObservableCollection<ObservableDatas> ObservableData { get; set; } List<ObservableDatas> Tasks = new List<ObservableDatas>(); private List<ColumnModel> columnData = new List<ColumnModel>() { new ColumnModel(){ HeaderText= “To Do”, KeyField= new List<string>() { “Open” } }, new ColumnModel(){ HeaderText= “In Progress”, KeyField= new List<string>() { “In Progress” } }, new ColumnModel(){ HeaderText= “Testing”, KeyField= new List<string>() { “Testing” } }, new ColumnModel(){ HeaderText= “Done”, KeyField=new List<string>() { “Close” } } }; protected override void OnInitialized() { Tasks = Enumerable.Range(1, 20).Select(x => new ObservableDatas() { Id = “Task 1000” + x, Status = (new string[] { “Open”, “In Progress”, “Testing”, “Close” })[new Random().Next(4)], Summary = (new string[] { “Analyze the new requirements gathered from the customer.”, “Improve application performance”, “Fix the issues reported in the IE browser.”, “Validate new requirements”, “Test the application in the IE browser.” })[new Random().Next(5)], Assignee = (new string[] { “Nancy Davloio”, “Andrew Fuller”, “Janet Leverling”, “Steven walker”, “Margaret hamilt”, “Michael Suyama”, “Robert King” })[new Random().Next(7)], }).ToList(); ObservableData = new ObservableCollection<ObservableDatas>(Tasks); } public class ObservableDatas : INotifyPropertyChanged { public string Id { get; set; } private string status { get; set; } public string Status { get { return status; } set { this.status = value; NotifyPropertyChanged(“Status”); } } public string Summary { get; set; } public string Assignee { get; set; } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(string propertyName) { var handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } }

Output:

Syncfusion Kanban control added to Tab of Microsoft Teams application
Syncfusion Kanban control added to Tab of Microsoft Teams application
Displays the dialog when clicking on the + icon
Displays the dialog when clicking on the + icon
Different functionalities performed in Kanban control
Different functionalities performed in Kanban control

GitHub reference

View the complete example of the Microsoft Teams app with Blazor Syncfusion controls on GitHub.

Conclusion

Thanks for reading! In this blog, we have seen the creation of a Microsoft Teams application with Syncfusion Blazor UI components. Try out the steps in this blog post.

About the Author

Sivakumar is a Product Manager with over 10 years of experience in software development. Currently, he manages the development of Syncfusion’s Web Components, which has been widely adopted by developers worldwide.

Reference

Sivakumar, R., 2023, Building an Application for Microsoft Teams with Blazor, Available at: https://www.syncfusion.com/blogs/post/building-an-application-for-microsoft-teams-with-blazor.aspx [Accessed on 13 March 2023]

Discover our Microsoft Teams Week content now.

Share this on...

Rate this Post:

Share: