Previous

Next

Create web parts for SharePoint Online and Microsoft Teams

Completed

In this unit, you'll learn how to conditionally display information depending on whether the SharePoint Framework client-side web part is running in a SharePoint or Microsoft Teams environment.

SharePoint Framework and Microsoft Teams context

All SharePoint components, including client-side web parts, have access to the current context. The context, available from the this.context object, gives your components access to details about the page the component is running on.

Your component can use the page's context, accessible from the this.context.pageContext object, to get information about the current site collection, site, page, and user.

Microsoft introduced a new context in the SharePoint Framework v1.8 release when they added support for deploying client-side web parts as Microsoft Teams tabs. The this.context.sdks.microsoftTeams object is a reference of the microsoftTeams object available in the @microsoft/teams-js package.

A client-side web part can detect if it's running in SharePoint or Microsoft Teams by checking if the microsoftTeams object is set to a value or is undefined. If it's undefined, then the component isn't running in Microsoft Teams.

Work with the Microsoft Teams context

Let's look at how your component can work with the Microsoft Teams context.

The following code sample contains a method that constructs a message indicating whether the web part is running in SharePoint, Microsoft Teams, or one of the Office options.

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;
        });
}

Summary

In this unit, you learned how to conditionally display information depending on whether the SharePoint Framework client-side web part is running in a SharePoint or Microsoft Teams environment.

Continue