Getting Started Channel Tab

Writing a Channel Tab Application

A channel tab application is the same as a personal tab application, but with an additional configuration page that you use to configure your tab. You can also optionally create a page for removing your tab. If you specify one, then the removal page is loaded in the remove dialog by Teams. On this page, you get a chance to perform tasks to get your application properly removed.

This page focuses on creating the configuration and removal pages using Blazorade Teams. The actual application can be written just like a personal tab application.

The Blazorade Teams repository contains a sample application that has the implementation of a tab application. That tab application just displays some of the information provided by Teams in the context object. The sample application has both a configuration and removal page.

The Configuration Page

When you create a Teams tab application for a team channel for instance, you only define the URL of the configuration tab in the manifest. That will then act as an entry point for Teams into your application.

The configuration page is responsible for instance for the following tasks.

• Set the name of the tab
• Set the URL to the content page (the actual application)
• Set the URL to the removal page

The source code below shows just the structure of the code to keep the code as descriptive as possible. The full code is available in the configuration page for the demo application.

@page "/tabappconfig"

@code{
    ApplicationContext Context;

    [Inject]
    NavigationManager NavMan { get; set; }

    [JSInvokable]
    public async Task SavingAsync(Dictionary<string, object> data)
    {
        // Code removed for clarity...
    }

    private bool isValid;
    private async Task TabNameChangedAsync(ChangeEventArgs e)
    {
        // Code removed for clarity...
    }
}
<TeamsApplication RequireAuthentication="true">
    <ApplicationTemplate>
        @{ this.Context = context; }

        <label for="tab-name">Tab Name</label>
        <div>
            <input id="tab-name" type="text" @onchange="this.TabNameChangedAsync" />
        </div>
    </ApplicationTemplate>
</TeamsApplication>

As you can see, the configuration page also uses the TeamsApplication component. When the application template is rendered, the context is stored in a local variable for later use.

The text field that is used to get the name of the tab has a changed event handler (TabNameChangedAsync) that determines whether the tab can be saved or not. This event handler.

The SavingAsync method is called by Blazorade Teams when the user has clicked the Save button, but before Teams has actually saved the tab. This allows you to perform actions to setup your application, like creating settings or data storages.

Note that the SavingAsync method must be decorated with the JSInvokable attribute, because the method is called by Blazorade Teams from JavaScript.

The Removal Page

The removal page is very similar to the configuration page. The code below is also stripped from the bulk of the code to keep it as descriptive as possible. The complete source code is available in the Blazorade Teams repository in the demo application's removal page.

@page "/TabAppRemove"

@code {
    ApplicationContext Context;

    [JSInvokable]
    public async Task RemovingAsync(Dictionary<string, object> data)
    {
        // Code removed for clarity...
    }

    private async Task ValidityChangedAsync(ChangeEventArgs e)
    {
        // Code removed for clarity...
    }
}
<TeamsApplication RequireAuthentication="true">
    <ApplicationTemplate>
        @{
            this.Context = context;
            this.Context.TeamsInterop.Settings
                .RegisterOnRemoveHandlerAsync(this.RemovingAsync);
            this.Context.TeamsInterop.Settings
                .SetValidityStateAsync(true);
        }
        <p>
            If you click the Remove button below, this application will be removed.
        </p>
    </ApplicationTemplate>
</TeamsApplication> 

Again, we use the TeamsApplication component. When the template is rendered, we store the context in a local variable, just as in the configuration page above. In addition to this, we register our removing callback method and set the validity state to true.

The removing callback, RemovingAsync, is called by Blazorade Teams after the user has clicked the Remove button, but before Teams has removed the application. In this method you can take care of anything you need to take care of to get your application properly removed. These can be things like removing settings or data stores, or something similar.

Note that the RemovingAsync method must be decorated with the JSInvokable attribute, because the method is called by Blazorade Teams from JavaScript.

The Application Page

The page that represents your application is also called the content page. It is very similar to a personal tab page. The Blazorade Teams demo application contains a tab application intended to be used as a channel tab. Check out the full source code for the TabApp content page and the TeamsContextView used on that page.

Next Steps

When you have completed your tab application with the configuration and removal pages, it's time to try it out. You can do this locally on your development machine with the help of the App Studio application.