Building an Application for Microsoft Teams with Blazor
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Building an Application for Microsoft Teams with Blazor

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 2022
    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
    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.
    Configure the project name and location
    Configure 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 create
    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.
    Structure of application
    Structure 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 app
    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
    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
    Newly 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 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 forumsupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed