Microsoft Teams Development: Building Tabs with SPFx

SPFx web parts can run as Microsoft Teams tabs. Here’s how to make your web parts Teams-aware.

Enable Teams Support

{
  "supportedHosts": ["SharePointWebPart", "TeamsTab"],
  "teamsJSsdk": true
}

Detect Teams Context

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

const isInTeams = !!this.context.sdks.microsoftTeams;

if (isInTeams) {
  const teamContext = this.context.sdks.microsoftTeams.context;
  console.log(teamContext.teamName);
}

Deploy to Teams

1. Build and package SPFx solution
2. Deploy to app catalog (sync to Teams enabled)
3. Add app to Teams channel

References

• Building for Teams