How to add SPFx webpart to Microsoft Teams tab

Create SPFx new project:

Open Node.js command prompt and run 'yo @microsoft/sharepoint'

Enable the webpart to be deployed as Teams Tab:

Go to TeamsTabWebPart.manifest.jsonàand ensure the “TeamsTab” is exist in ‘supportedHosts’.

Enable Tenant wide deployed if needed

1. In this 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.

2. It would be globally deployed to all Site collections from app catalog.

3. 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 individual add this solution on  MS Team site collection.

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

Updating webpart code to be read Microsoft Teams context:

  Ø  Open ./src/webparts/TeamsTab/TeamsTabWebPart.ts for the needed edits on making our solution aware of the Microsoft Teams context, if it’s used as a tab.

  Ø  Update the render() method

   We can detect if solution is hosted by Microsoft Teams by checking the                                                      this.context.sdks.microsoftTeams property.

  public render(): void {

    let title: string = '';
    let subTitle: string = '';
    let siteTabTitle: string = '';
  
    if (this.context.sdks.microsoftTeams) {
      // 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.context.sdks.microsoftTeams.teamsJs.app.getContext();
    }
    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.teamsTab }">
        <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>`;
  }

Updating .SCSS file to fix the styles which we used in webpart file:

  Ø  Open ./src/webparts/TeamsTab/TeamsTabWebPart.module.scss and update the below classes:

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

.teamsTab {
  overflow: hidden;
  padding: 1em;
  color: "[theme:bodyText, default: #323130]";
  color: var(--bodyText);
  &.teams {
    font-family: $ms-font-family-fallbacks;
  }
}

.container {
  max-width: 700px;
  margin: 0px auto;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.row {
  @include ms-Grid-row;
  @include ms-fontColor-white;
  background-color: $ms-color-themeDark;
  padding: 20px;
}

.column {
  @include ms-Grid-col;
  @include ms-lg10;
  @include ms-xl8;
  @include ms-xlPush2;
  @include ms-lgPush1;
}

.title {
   @include ms-font-l;
   @include ms-fontColor-white;
   background-color: $ms-color-themePrimary;
  }
  
.subTitle {
  @include ms-font-l;
  @include ms-fontColor-white;
 }
  
.description {
  @include ms-font-l;
  @include ms-fontColor-white;
 }

 .button {
   // Our button
   text-decoration: none;
   height: 32px;
  
   // Primary Button
   min-width: 80px;
   background-color: $ms-color-themePrimary;
   border-color: $ms-color-themePrimary;
   color: $ms-color-white;
  
   // Basic Button
   outline: transparent;
   position: relative;
   font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
   -webkit-font-smoothing: antialiased;
   font-size: $ms-font-size-m;
   font-weight: $ms-font-weight-regular;
   border-width: 0;
   text-align: center;
   cursor: pointer;
   display: inline-block;
   padding: 0 16px;
  
   .label {
     font-weight: $ms-font-weight-semibold;
     font-size: $ms-font-size-m;
     height: 32px;
     line-height: 32px;
     margin: 0 4px;
     vertical-align: top;
     display: inline-block;
     }
   }

.welcome {
  text-align: center;
}

.welcomeImage {
  width: 100%;
  max-width: 420px;
}

.links {
  a {
    text-decoration: none;
    color: "[theme:link, default:#03787c]";
    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only

    &:hover {
      text-decoration: underline;
      color: "[theme:linkHovered, default: #014446]";
      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
    }
  }
}

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.

Package and deploy your webpart to SharePoint:

  Ø  Execute the following commands to build bundle your solution. This executes a release build of your project by using a dynamic label as the host URL for your assets.

gulp bundle --ship

  Ø  Execute the following task to package your solution. This creates an updated teams-tab-webpart.sppkg package on the sharepoint/solution folder.

gulp package-solution --ship

  Ø  Next, you need to deploy the package that was generated to the tenant App Catalog.

  Ø  Go to your tenant's SharePoint App Catalog.

  Ø  Upload or drag and drop the teams-tab-webpart.sppkg to the App Catalog.