Building an Application for Microsoft Teams with Blazor
Tags: blazor, development, microsoft, webdev
Published: 2023-01-18 13:13:03

---
title: Building an Application for Microsoft Teams with Blazor
published: true
date: 2023-01-18 11:55:06 UTC
tags: blazor, development, microsoft, webdev
canonical_url: https://www.syncfusion.com/blogs/post/building-an-application-for-microsoft-teams-with-blazor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nm09zfj9n3ezoseaa3mn.png
---
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](https://www.syncfusion.com/blazor-components "Blazor UI components library") 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]](https://visualstudio.microsoft.com/vs/ "Visual Studio 2022") with the following required workloads:
  -ASP.NET and web development under workloads.
    Microsoft Teams development tools from the options checklist.
2.[Microsoft Teams](https://www.microsoft.com/en-us/microsoft-teams/download-app "Microsoft Teams")
    - Enable side loading for testing the app.
3.[Microsoft Edge](https://www.microsoft.com/en-us/edge "Microsoft Edge") or [Chrome](https://www.google.com/chrome/ "Google Chrome") browser with developer tools.

Please refer to the [Microsoft docs guide](https://docs.microsoft.com/en-us/microsoftteams/platform/sbs-gs-blazorupdate?tabs=vs&tutorial-step=1 "Documentation: Instructions for installing workloads in Visual Studio"), 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**.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Creation-of-a-new-project-in-Visual-Studio-2022-1.png" alt="Creation of a new project in Visual Studio 2022" style="width:100%">

  <figcaption>Creation of a new project in Visual Studio 2022</figcaption>

</figure>

2.Search for and select the **Microsoft Teams app** project template and click **Next**.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Selection-of-Teams-app-from-the-project-templates-1.png" alt="Selection of Teams app from the project templates" style="width:100%">

  <figcaption>Selection of Teams app from the project templates</figcaption>

</figure>

3.Configure the project with the required project name, select the location to save the application, and click **Create**.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Configure-the-project-name-and-location-1.png" alt="Configure the project name and location" style="width:100%">

  <figcaption>Configure the project name and location</figcaption>

</figure>

4.Select the type of Microsoft Teams application to create. We are going to create a Tab application.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Select-the-type-of-Teams-application-to-create-1.png" alt="Select the type of Teams application to create" style="width:100%">

  <figcaption>Select the type of Teams application to create</figcaption>

</figure>

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Structure-of-application-1.png" alt="Structure of application" style="width:100%">

  <figcaption>Structure of application</figcaption>

</figure>

## 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**.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Configure-the-application-with-Microsoft-Teams-app-1.png" alt="Configure the application with Microsoft Teams app" style="width:100%">

  <figcaption>Configure the application with Microsoft Teams app</figcaption>

</figure>

2.Select the available Office 365 account or add the account to sign in. Click **Continue**.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Select-the-Office-365-account-to-sign-in-to-Microsoft-Teams-app-1.png" alt="Select the Office 365 account to sign in to Microsoft Teams app" style="width:100%">

  <figcaption>Select the Office 365 account to sign in to Microsoft Teams app</figcaption>

</figure>

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Newly-created-Microsoft-Teams-application-1.png" alt="Newly created Microsoft Teams application" style="width:100%">

  <figcaption>Newly created Microsoft Teams application</figcaption>

</figure>

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Microsoft-Teams-application-installed-1.png" alt="Microsoft Teams application installed" style="width:100%">

  <figcaption>Microsoft Teams application installed</figcaption>

</figure>

## Integrate Blazor Syncfusion component in Microsoft Teams app

1.To add the [Blazor Kanban component](https://www.syncfusion.com/blazor-components/blazor-kanban-board "Blazor Kanban Board") 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](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban "Syncfusion.Blazor.Kanban NuGet package"), and install it.
2.Open the **~/\_Imports.razor** file and import the Syncfusion.Blazor namespace.
```csharp
@using Syncfusion.Blazor
```
3.Next, register the Syncfusion Blazor service in the Microsoft Teams application in the **~/Program.cs** file.
```csharp
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](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/ "Syncfusion Blazor.Themes NuGet package"), and install it. Then, reference the Syncfusion styles and scripts in the <head> of the **~/Pages/\_Host.cshtml** file in the application.
```xml
<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.
```xml
@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.
```csharp
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:**
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Syncfusion-Kanban-control-added-to-Tab-of-Microsoft-Teams-application-1.png" alt="Syncfusion Kanban control added to Tab of Microsoft Teams application" style="width:100%">

  <figcaption>Syncfusion Kanban control added to Tab of Microsoft Teams application</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Displays-the-dialog-when-clicking-on-the-icon-2.png" alt="Displays the dialog when clicking on the + icon" style="width:100%">

  <figcaption>Displays the dialog when clicking on the + icon</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Different-functionalities-performed-in-Kanban-control-1.gif" alt="Different functionalities performed in Kanban control" style="width:100%">

  <figcaption>Different functionalities performed in Kanban control</figcaption>

</figure>

## GitHub reference

View the complete example of the [Microsoft Teams app with Blazor Syncfusion controls](https://github.com/SyncfusionExamples/Building-Apps-for-Microsoft-Teams-with-Blazor-using-Syncfusion-Components "Building apps for Microsoft Teams with Syncfusion Blazor components GitHub demo") on GitHub.

## Conclusion

Thanks for reading! In this blog, we have seen the creation of a Microsoft Teams application with [Syncfusion Blazor UI components](https://www.syncfusion.com/blazor-components "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](https://www.syncfusion.com/account/manage-trials/downloads "Free evaluation of the Syncfusion Essential Studio") or downloading our [NuGet package](https://www.nuget.org/packages/Syncfusion.Blazor "Syncfusion Blazor NuGet package"). Feel free to have a look at our [online examples](https://blazor.syncfusion.com/ "Blazor components demo") and [documentation](https://blazor.syncfusion.com/documentation/introduction/ "Syncfusion Blazor Components documentation") to explore other available features.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums/blazor-components "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Task Scheduling and Markers in Blazor Gantt Chart](https://www.syncfusion.com/blogs/post/task-scheduling-and-markers-in-blazor-gantt-chart.aspx "Blog: Task Scheduling and Markers in Blazor Gantt Chart")
- [Implement User Tagging in Blazor Rich Text Editor with Mention Component](https://www.syncfusion.com/blogs/post/user-tagging-in-blazor-rich-text-editor.aspx "Blog: Implement User Tagging in Blazor Rich Text Editor with Mention Component")
- [What’s New in Syncfusion Blazor: 2022 Volume 4](https://www.syncfusion.com/blogs/post/whats-new-in-syncfusion-blazor-2022-volume-4.aspx "Blog: What’s New in Syncfusion Blazor: 2022 Volume 4")
- [A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly](https://www.syncfusion.com/blogs/post/to-do-app-using-js-interop-with-html5-drag-and-drop-in-blazor-webassembly.aspx "Blog: A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly")