Adding SPFx webpart to Microsoft Team Tab

With SPfx version 1.8, Microsoft has provided 2 additional Supported Host for SPFx webpart.

• Add to Microsoft Team tabs
• Single Page App Framework (App Pages).

For this article, we will focus on adding SPFx webpart to Team tabs and know how to use Microsoft Team context in code for accessing MS Team related data.

Pre-requisites  – You have a working SPFx webpart (if not you can create a new Hello World from example here)

For my example, I have a SPFx solution with name ‘all-platforms-webpart’. Let us convert existing webpart so that it can be added to Team tabs.

Step 1 – Enable Webpart to be deployed as Teams tabs

• Go to webpart.manifest.json
• Add below line to json, if entry already exist just make sure you Add “TeamTab’ in “supportedHosts”

• Every MS Team has associated SharePoint site collection created where all content is stored.
• To check site associated for a MS team, refer below screenshot

Now for simplicity of this example, we will configure this solution as tenant wide deployment, by doing this we won’t have to deploy this solution individually to each site collection. It would be globally deployed to all Site collections from app catalog.  However please note that if you don’t want tenant wide deployment of your SPFx solution, you can skip this step. But then to add this app to MS team, you will have to individuall add this solution on  MS Team site collection(refer above screenshot on how to go to MS team site collection, rest is as usual, add app and install)

For tenant deployment, go to ./config/package-solution.json, add attribute “skipFeatureDeployment”: true like below.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "all-platforms-webpart-client-side-solution",
    "id": "fbf5059e-a0c9-4aba-9258-670a7cc3fa6a",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "skipFeatureDeployment": true
  },
  "paths": {
    "zippedPackage": "solution/all-platforms-webpart.sppkg"
  }
}

Step 3 – Updating webpart code to be read Microsoft Teams context

• Open AllPlatformWebPartWebPart.ts for the needed edits on making our solution aware of the Microsoft Teams context, if it’s used as a tab.
• Import team modules

import * as microsoftTeams from ‘@microsoft/teams-js’;

• Create variable to store teamContext

export default class AllPlatformWebPartWebPart extends BaseClientSideWebPart<IAllPlatformWebPartWebPartProps> {

  // This variable has been added
private _teamsContext: microsoftTeams.Context;

• Add onInit method to initialize team context

protected onInit(): Promise<any> {
  let retVal: Promise<any> = Promise.resolve();
  if (this.context.microsoftTeams) {
    retVal = new Promise((resolve, reject) => {
      this.context.microsoftTeams.getContext(context => {
        this._teamsContext = context;
        resolve();
      });
    });
  }
  return retVal;
}

• Update render method to read context and apply business logic accordingly. Based on TeamContext or SharePointContext we have to use control our logic to make sure single webpart works in both host.

public render(): void {

  let title: string = '';
  let subTitle: string = '';
  let siteTabTitle: string = '';

  if (this._teamsContext) {
    // We have teams context for the web part
    title = "Welcome to Teams!";
    subTitle = "Building custom enterprise tabs for your business.";
    siteTabTitle = "We are in the context of following Team: " + this._teamsContext.teamName;
  }
  else
  {
    // We are rendered in normal SharePoint context
    title = "Welcome to SharePoint!";
    subTitle = "Customize SharePoint experiences using Web Parts.";
    siteTabTitle = "We are in the context of following site: " + this.context.pageContext.web.title;
  }

  this.domElement.innerHTML = `
    <div class="${ styles.allPlatformWebPart }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <span class="${ styles.title }">${title}</span>
            <p class="${ styles.subTitle }">${subTitle}</p>
            <p class="${ styles.description }">${siteTabTitle}</p>
            <p class="${ styles.description }">Description property value - ${escape(this.properties.description)}</p>
            <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
            </a>
          </div>
        </div>
      </div>
    </div>`;
}

Step 5 – Check and verify teams icon and outline

To sync  SPFx webpart to Teams, we need to make sure our solution has color and outline png file which is required. You will find this files in teams folder in your project root directory

Name of this file should be in specific format,  Teams folder contains the following two files:

• [componentId]_color.png – Default small picture for a tab
• [componentId]_outline.png – Default large picture for a tab

componentId here is GUID of webpart – We can find this in webpart.manifest.json file with “id” attribute.

Step 4 – Package the solution.

gulp build

gulp bundle –ship

gulp package-solution –ship

Solution file will be created at “D:\SP\Samples\all-platforms-webpart\sharepoint\solution” with name ‘all-platforms-webpart.sppkg’

Step 5 – Deploy Package

Note – If you do not have an app catalog, a SharePoint Online Admin can create one by following the instructions in this guide: Use the App Catalog to make custom business apps available for your SharePoint Online environment.

• Go to site catalog
• Drag and drop you .sppkg file on App for SharePoint

• Trust the solution, Ensure that the Make this solution available to all sites in the organization option is selected, so that the web part can be used from the Microsoft Teams side.

• Click Deploy, ensure webpart is deployed with error(refer error column in view)

Step 6 – Sync solution to Team

• Click you solution, on ribbon we will see ‘Sync to Team options’

• You should get success message.

Step 8 Add tab to MS Team

• Visit MS team, click on + symbol as below

• Below popup should open, find our web part with name, Select our web part

• Click Install

  

• Once added, we can see below web part added as tab in MS Team

• If you notice, we are getting message Welcome to Team

That’s it, we have successfully deploy SPFx webpart to Microsoft Teams tabs.