Exercise - Add conditional logic for SharePoint or Microsoft Teams

In this exercise, you'll update the SharePoint Framework web part from the previous exercise to display different information depending on whether its running within a SharePoint or Microsoft Teams context.

Locate and open the file ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.ts.

Add the following import statement to the existing import statements at the top of the file:

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

Add the following private member to the class SpFxTeamsTogetherWebPart. This will store the Microsoft Teams context in the case where the web part is running within a Microsoft Teams team:

private teamsContext: microsoftTeams.Context;

Add the following method to the SpFxTeamsTogetherWebPart class to run when the web part is loaded on a page:

protected onInit(): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    if (this.context.microsoftTeams) {
      this.context.microsoftTeams.getContext(context => {
        this.teamsContext = context;
        resolve();
      });
    } else {
      resolve();
    }
  });
}

Locate the render() method in the SpFxTeamsTogetherWebPart class. Add the following two members to set the title and current location depending on whether the web part is running in a SharePoint or Microsoft Teams context. Notice how using the necessary context property, you can get the name of the team or SharePoint site where the web part is currently running:

let title: string = (this.teamsContext)
  ? 'Teams'
  : 'SharePoint';
let currentLocation: string = (this.teamsContext)
  ? `Team: ${this.teamsContext.teamName}`
  : `site collection ${this.context.pageContext.web.title}`;

Finally, update the HTML written to the page. Replace the existing <div class="${ styles.column }"> with the following markup:

<div class="${ styles.column }">
  <span class="${ styles.title }">Welcome to ${ title }!</span>
  <p class="${ styles.subTitle }">Currently in the context of the following ${ currentLocation }</p>
  <p class="${ styles.description }">${escape(this.properties.description)}</p>
  <a href="https://aka.ms/spfx" class="${ styles.button }">
    <span class="${ styles.label }">Learn more</span>
  </a>
</div>

Package and deploy the web part

Build the project by opening a command prompt and changing to the root folder of the project. Then execute the following command:

gulp build

Next, create a production bundle of the project by running the following command on the command line from the root of the project:

gulp bundle --ship

Finally, create a deployment package of the project by running the following command on the command line from the root of the project:

gulp package-solution --ship

Locate the file created by the gulp task, found in the ./sharepoint/solution folder with the name *.sppkg.

Drag this file into the Apps for SharePoint library in the browser. When prompted, select Replace It.

Screenshot dragging the SharePoint package into the Apps for SharePoint library

Test the changes

Navigate back to the SharePoint page where you added the web part in the previous exercise.

Notice how the page shows that it's currently in the SharePoint context and displays the current SharePoint site name:

Screenshot of the SPFx solution in SharePoint

Now go back into the Microsoft Teams team and select the tab that you previously added. Notice how the message says you're currently in Teams and the name of the team:

Screenshot of the SPFx solution in Microsoft Teams

Summary

In this exercise, you'll update the SharePoint Framework web part from the previous exercise to display different information depending on whether its running within a SharePoint or Microsoft Teams context.

Test your knowledge

1.

How can you determine if a SharePoint Framework client-side web part is running in SharePoint Online or Microsoft Teams?

2.

Do you need to do any additional steps to SharePoint client-side web parts to access Microsoft Teams related information?