Add SPFx WebPart in Microsoft Teams Tab

In SharePoint Framework version 1.8, you can easily implement Teams tabs.

In this article we will see how to Add SPFx Webpart in Microsoft Teams Tab :

Turn on “Enable side loading of external apps” (This setting will be done at the tenant level). To enable this setting follow below steps:

1. Go to to the Microsoft 365 admin center by selecting Admin from the app launcher.

Admin Panel | Add SPFx Webpart in Microsoft Teams Tab

2. Select Settings > Services & add-ins from the left menu

Office 365 Setting | Add SPFx Webpart in Microsoft Teams Tab

3. Select Microsoft Teams from the list of services you want to manage

MS Teams Setting

4. Extend the Apps section under Tenant-wide settings

App Section | Office 365 Setting | Add SPFx Webpart in Microsoft Teams Tab

5. Enable the  Allow sideloading of external apps setting

Allow Sideloading | Add SPFx Webpart in Microsoft Teams Tab
  1. Development process is similar as for SharePoint Framework web parts so SPFx Teams solutions are deployed to Office 365 tenants using tenant app catalog.
  2. Any web part can be exposed as a tab in the Microsoft.
  3. There are different scoping options on exposing your custom tab as a web part and tab in your tenant.
  4. Teams tab will be executed in the context of the underlying SharePoint site behind the specific team.
  5. We can take advantage of any SharePoint specific APIs or functionalities in our web part.

Now we will start the development process so for that follow below steps:

  1. Open the command prompt and create a directory for SPFx solution. 
  2. Move to the above-created directory
  3. Run yo generator to create the solution 
  4. It will ask some questions about creating a solution so give an answer as shown below image:

  1. After successfully creating solution open solution in VS Code, you can use a shortcut to open it using code . command on command prompt.

The project structure will be as shown below image:

As per the above image you can see teams folder contains 2 files.

  • [webpartid]_color.png: Default small image for tab
  • [webpartid]_outline.png: Default large image for the tab

6. Open the webpart manifest JSON file and add the TeamsTab in supportedHosts  property as shown below:

7. Update the webpart .ts file as below:

Add below import statement on top of the file:
import * as microsoftTeams from '@microsoft/teams-js';

Create a  variable inside a class to store Teams Context :

private teamsContext: microsoftTeams.Context;
Create an onInit() method to store team context as below:
export default class SpFxTeamsTabWebPart extends BaseClientSideWebPart<ISpFxTeamsTabWebPartProps> {
  
  private teamsContext: microsoftTeams.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 the render() method as below:

public render(): void {

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

  if (this._teamsContext) {
    title = "SPFx webpart in MS Teams!";
    subTitle = "Team Context " + this._teamsContext.teamName;
  }
  else
  {
    title = "SPFx webpart in SharePoint Online!";
    subTitle = "Site Context: " + this.context.pageContext.web.title;
  }

  this.domElement.innerHTML = `
    <div class="${ styles.spFxTeamsTab }">
      <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 }">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>`;
}
  1. Using gulp serve command you can test webpart in workbench URL

2. Now we will deploy webpart in MS Teams so for that we will sequentially follow below steps :

gulp build
gulp bundle --ship
gulp package-solution --ship

Once you get a development package, upload it on app catalog site.

3. Sync To Teams

After successful webpart deployment, we will sync webpart with teams.

so, for that we have to select our webpart and then on the top files ribbon you can see sync to teams as below image, Click on that button to sync

After successfully sync you will get the message as Successfully synced teams solution.

4. Make a webpart to available for Teams 

Go to the Microsoft Teams

You can see store at bottom of the left panel, click on store and search your created app and then click on install

Once webpart is installed, it will be available for Teams. Now click on setup, which will ask you to select a channel, On selecting a channel it will add webpart in that channel.

After successfully setup you can see webpart as a tab as shown below:

Great !!! It’s done.

Sharing is Caring.
Happy Coding 🙂

0 0 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Shanthanalaxmi
Shanthanalaxmi
1 year ago

Very nice article