SharePoint Online および Microsoft Teams の Web パーツを作成する

完了

このユニットでは、SharePoint Framework Web パーツが SharePoint で実行されているかMicrosoft Teamsかに基づいて情報を表示する方法について説明します。

SharePoint Framework および Microsoft Teams のコンテキスト

クライアント側の Web パーツを含むすべての SharePoint コンポーネントは、現在のコンテキストにアクセスできます。 this.context オブジェクトからアクセス可能なコンテキストにより、コンポーネントが実行されているページの詳細にそのコンポーネントがアクセスできるようになります。

コンポーネントは、this.context.pageContext オブジェクトからアクセスできるページのコンテキストを使用して、現在のサイト コレクション、サイト、ページ、ユーザーに関する情報を取得できます。

Microsoft では、SharePoint Framework v1.8 リリースで、クライアント側の Web パーツを Microsoft Teams タブとして展開するためのサポートを追加したときに新しいコンテキストを導入しました。 this.context.sdks.microsoftTeams オブジェクトは、@microsoft/teams-js パッケージで使用できるmicrosoftTeams オブジェクトの参照です。

クライアント側 Web パーツは、 microsoftTeams オブジェクトが値に設定されているか、未定義であるかを確認することで、SharePoint で実行されているか、Microsoft Teamsされているかを検出できます。 undefinedの場合、コンポーネントはMicrosoft Teamsで実行されていません。

Microsoft Teams コンテキストを使用する

ここでは、コンポーネントが Microsoft Teams コンテキストを使用する方法について説明します。

次のコード サンプルは、Web パーツが SharePoint、Microsoft Teams、または Office オプションのいずれかで実行されているかどうかを示すメッセージを作成するメソッドを示しています。

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

概要

このユニットでは、SharePoint Framework のクライアント側の Web パーツが SharePoint 環境または Microsoft Teams 環境のいずれで実行されているかに応じて情報を表示する方法について説明しました。