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

1.Visual Studio 2022 [version 17.3 or higher] with the following required workloads:
-ASP.NET and web development under workloads.
Microsoft Teams development tools from the options checklist.
2.Microsoft Teams
- Enable side loading for testing the app.
3.Microsoft Edge or Chrome browser with developer tools.

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 2022

2.Search for and select the Microsoft Teams app project template and click Next.

Selection 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.

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 create

5.Allow the application to load the dependencies. The project structure will look like the following screenshot.

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 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 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 application

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

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

of the ~/Pages/_Host.cshtml file in the application.

<head>
  ...xml
  <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

Displays the dialog when clicking on the + icon

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 and leave your feedback in the comments section below!

Try our Blazor components by downloading a free 30-day trial or downloading our NuGet package. Feel free to have a look at our online examples and documentation to explore other available features.

For questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Blog

Building an Application for Microsoft Teams with Blazor

Jollen Moyani

Prerequisites

Creating project for Tab app in Microsoft Teams

Build and run the default Microsoft Teams application

Integrate Blazor Syncfusion component in Microsoft Teams app

GitHub reference

Conclusion

Related blogs

Join Our Newsletter. No Spam, Only the good stuff.

Related