Previous

Next

Exercise - Add conditional logic for SharePoint or Microsoft Teams

Completed

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

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

Locate the _getEnvironmentMessage() method in the SpFxTeamsTogetherWebPart class. This code constructs a message indicating whether the web part is running in SharePoint or Teams by checking the value of this.context.sdks.microsoftTeams. If the microsoftTeams object has a value, then the web part is running in Teams. If the microsoftTeams object is undefined, then the web part isn't running in Teams:

private _getEnvironmentMessage(): Promise<string> {
  if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
    return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
      .then(context => {
        let environmentMessage: string = '';
        switch (context.app.host.name) {
          case 'Office': // running in Office
            environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
            break;
          case 'Outlook': // running in Outlook
            environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
            break;
          case 'Teams': // running in Teams
            environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
            break;
          default:
            throw new Error('Unknown host');
        }

        return environmentMessage;
      });
  }

  return Promise.resolve(this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment);
}

Replace the implementation of _getEnvironmentMessage() method with the following code. It not only constructs a message indicating whether the web part is running in SharePoint or Teams, it also uses the appropriate context object to include the name of the team or SharePoint site where the web part is currently running:

private _getEnvironmentMessage(): Promise<string> {
  let environmentMessage: string = '';

  if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
    return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
      .then(teamsContext => {
        environmentMessage = this.context.isServedFromLocalhost
          ? strings.AppLocalEnvironmentTeams
          : strings.AppTeamsTabEnvironment;

        environmentMessage += `. Team name: ${teamsContext.team?.displayName}`;

        return environmentMessage;
      });
  } else {
    environmentMessage = this.context.isServedFromLocalhost
      ? strings.AppLocalEnvironmentTeams
      : strings.AppTeamsTabEnvironment;

    environmentMessage += `. Site name: ${this.context.pageContext.web.title}`;

    return Promise.resolve(environmentMessage);
  }
}

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

Navigate to the modern tenant app catalog (that is, the Manage Apps page).

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.

In the Enable app panel, ensure the Enable this app and add it to all sites radio button is selected and then select Enable app.

In the This app has been enabled panel, select Close.

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:

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:

Summary

In this exercise, you updated the SharePoint Framework web part from the previous exercise to display different information depending on whether it's 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?

You can't. Microsoft Teams renders tabs in an <iframe>, so the web part just knows it's loaded in the browser.

Use the this.context.sdks.microsoftTeams object to determine if the web part is running in Microsoft Teams or SharePoint Online.

Use the this.context.isTeams and this.context.isSharePoint properties to determine if the web part is running in Microsoft Teams or SharePoint Online.

2.

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

No, the web part has everything it needs to access properties like the current team name.

Yes, you need to import the @microsoft/teams-js package.

You must answer all questions before checking your work.

Continue