Erstellen von Webparts für SharePoint Online und Microsoft Teams

Abgeschlossen

In dieser Einheit lernen Sie, wie Sie Informationen bedingt anzeigen können, je nachdem, ob das clientseitige Webpart von SharePoint-Framework in einer SharePoint- oder Microsoft Teams-Umgebung ausgeführt wird.

Kontext von SharePoint-Framework und Microsoft Teams

Alle SharePoint-Komponenten, einschließlich der clientseitigen Webparts, haben Zugriff auf den aktuellen Kontext. Der Kontext, der über das this.context-Objekt verfügbar ist, gibt Ihren Komponenten Zugriff zu Details über die Seite, auf der die Komponente läuft.

Ihre Komponente kann den Kontext der Seite, der über das this.context.pageContext-Objekt zugänglich ist, nutzen, um Informationen über die aktuelle Websitesammlung, die Website, die Seite und den Benutzer zu erhalten.

Microsoft hat in der Version SharePoint-Framework v1.8 einen neuen Kontext eingeführt, als die Unterstützung für die Bereitstellung von clientseitigen Webparts als Microsoft Teams-Registerkarten hinzugefügt wurde. Das this.context.sdks.microsoftTeams -Objekt ist ein Verweis auf das Objekt, das microsoftTeams im paket @microsoft/teams-js verfügbar ist.

Ein clientseitiges Webpart kann erkennen, ob es in SharePoint oder Microsoft Teams ausgeführt wird, indem überprüft wird, ob das microsoftTeams Objekt auf einen Wert festgelegt ist oder nicht definiert ist. Wenn es ist undefined, wird die Komponente nicht in Microsoft Teams ausgeführt.

Arbeiten mit dem Microsoft Teams-Kontext

Schauen wir uns an, wie Ihre Komponente mit dem Microsoft Teams-Kontext zusammenarbeiten kann.

Das folgende Codebeispiel enthält eine Methode, die eine Meldung erstellt, die angibt, ob das Webpart in SharePoint, Microsoft Teams oder einer der Office-Optionen ausgeführt wird.

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

Zusammenfassung

In dieser Einheit haben Sie gelernt, wie Sie Informationen bedingt anzeigen können, je nachdem, ob das clientseitige Webpart von SharePoint-Framework in einer SharePoint- oder Microsoft Teams-Umgebung ausgeführt wird.