Freigeben über

Erweitern von Outlook und Office mit dem SharePoint-Framework

  • Artikel

Mit der Version SharePoint-Framework (SPFx) v1.16 wurde Unterstützung für das Microsoft Teams JavaScript Client SDK v2 hinzugefügt. Mit dem Microsoft Teams JavaScript Client SDK v2 wurde die Möglichkeit eingeführt , teams-Apps zusätzlich zu Microsoft Teams in Outlook in Office auszuführen.

Mit dieser Verbesserung in SPFx v1.16 können Entwickler jetzt SPFx verwenden, um Apps für Outlook und Office mithilfe der vorhandenen Unterstützung für das Erstellen von Apps für Microsoft Teams zu erstellen.

Wichtig

Die Möglichkeit, Microsoft Teams-Apps in Outlook und Office auszuführen, befindet sich derzeit in der Betaphase mit voraussichtlicher Verfügbarkeit in der ersten Hälfte des Kalenderjahrs 2023.

Wichtig

Wichtige Informationen, die für den Erfolg des Benutzers erforderlich sind

Um die Verwendung von Microsoft Teams-Apps in Outlook und Office zu testen, einschließlich der mit SPFx erstellten Apps, müssen Sie die Releaseeinstellungen Ihres Microsoft 365-Mandanten für das Zielrelease konfigurieren. Weitere Informationen zum Ändern der Releaseeinstellungen Ihrer Organisation finden Sie unter Einrichten der Standard- oder Zielversionsoptionen.

Es dauert 5 Werktage, bis die Releaseeinstellungen Ihres Mandanten wirksam werden. Anders ausgedrückt: Wenn Sie Ihren Mandanten am 5. des Monats von der Standardversionsspur in die Zielversionsspur ändern, können Sie Ihre microsoft Teams-Apps, die mit SPFx in Outlook oder Office erstellt wurden, erst am 11. des Monats testen.

Erstellen von Microsoft Teams-Apps für Outlook und Office

Um eine neue Microsoft Teams-App mit SPFx für Outlook und Office zu erstellen, erstellen Sie zunächst ein neues SPFx-Projekt mithilfe des Yeoman-Generators für SharePoint v1.16 oder höher auf die gleiche Weise, wie Sie ein neues Webpart erstellen würden. Weitere Informationen finden Sie unter Erstellen Ihres ersten clientseitigen SharePoint-Webparts.

Der Yeoman SharePoint-Generator zeigt eine Reihe von Fragen an. Befolgen Sie die gleiche Anleitung zum Erstellen eines neuen SPFx-Webparts, wenn Sie auf diese Fragen antworten.

Nachdem das Projekt erstellt wurde, aktualisieren Sie die -Eigenschaft des Webparts supportedHosts , um anzugeben, wo es verwendet werden kann. Fügen Sie z. B. und/oder TeamsPersonalApp der Eigenschaft te supportedHosts in der Datei ./config/package-solution.json hinzuTeamsTab. Weitere Informationen finden Sie unter Erstellen von Microsoft Teams-Registerkarten mit SharePoint-Framework.

Ermitteln des aktuellen Laufzeithosts für Ihre App

Ihre Anwendung muss möglicherweise aus verschiedenen Gründen ermitteln, wo sie derzeit ausgeführt wird. Soll Benutzern beispielsweise eine Benutzeroberfläche angezeigt werden, wenn sie in SharePoint, Microsoft Teams, Outlook oder einem anderen Office-Client ausgeführt wird?

Verwenden Sie die SPFx-Eigenschaft context für die -Klasse des Webparts und den Microsoft Teams JavaScript-Client, um den Hostingclient zu bestimmen. Die app.host.name Eigenschaft auf dem Teams JavaScript-Client enthält den Namen des Hosts, wenn es sich um Microsoft Teams, Outlook oder Office handelt. Wenn das Microsoft Teams-Kontextobjekt ist undefined, wird das Webpart in SharePoint ausgeführt.

// if running in Microsoft Teams, Outlook, or Office...
if (!!this.context.sdks.microsoftTeams) {
  const teamsContext = await this.context.sdks.microsoftTeams.teamsJs.app.getContext();
  switch (teamsContext.app.host.name.toLowerCase()) {
    case 'teams': // this is the host name for the "classic" Teams client
    case 'teamsmodern': // this is the host name for the "new" Teams client
      // RUNNING IN MICROSOFT TEAMS
    case 'office':
      // RUNNING IN OFFICE / OFFICE.COM
    case 'outlook':
      // RUNNING IN OUTLOOK
    default:
      throw new Error('Unknown host');
  }
} else {
  // RUNNING IN SHAREPOINT
}

Erstellen des Microsoft Teams-App-Manifestpakets &

Die Schaltfläche Mit Teams synchronisieren des SharePoint Online-App-Katalogs kann zwar automatisch das Microsoft Teams-App-Manifest, das App-Paket erstellen und im Microsoft Teams Store installieren, aber das erforderliche Dateiformat des Microsoft Teams-App-Manifests wird derzeit nicht unterstützt. Die Teams-App-Manifestdatei muss version 1.13 oder höher sein.

Die andere Möglichkeit besteht darin, das App-Manifest und das App-Paket manuell selbst zu erstellen und in das SharePoint-Paket aufzunehmen, das in den App-Katalog hochgeladen wurde. Wenn Sie im App-Katalog auf die Schaltfläche Mit Teams synchronisieren klicken, verwendet SharePoint Online das Teams-App-Paket, das Sie erstellt und im SharePoint-Paket enthalten haben.

Hinweis

Weitere Informationen zum manuellen Erstellen von Microsoft Teams-App-Manifesten und App-Paketen finden Sie unter Bereitstellungsoptionen für SharePoint-Framework Lösungen für Microsoft Teams.

Erstellen des Microsoft Teams-App-Manifests

Der erste Schritt besteht darin, das Microsoft Teams-App-Manifest zu erstellen.

  1. Erstellen Sie die folgende Datei in Ihrem SPFx-Projekt: ./teams/manifest.json.
  2. Befolgen Sie die Anleitung unter Microsoft Teams: App-Manifestschema für Teams und SharePoint-Framework: Bereitstellungsoptionen für SharePoint-Framework Lösungen für Microsoft Teams, um eine neue App-Manifestdatei zu erstellen.
  3. Beachten Sie besonders die folgenden Eigenschaften in der Datei manifest.json :

    • manifestVersion: Dies muss auf 1.13 oder höher festgelegt werden.

    • staticTabs und/oder configurableTabs: Stellen Sie sicher, dass dies den Anweisungen für die Verwendung eines SPFx-Webparts als Microsoft Teams-Registerkarte entspricht.

      Beispielsweise sollten die contentUrl -Eigenschaft und jede andere Eigenschaft, die auf SPFx-Komponenten verweist, die dynamischen Token {teamSiteDomain}, {teamSitePath}und &{locale}verwenden. Außerdem sollte auf die Komponenten-ID von SPFx verwiesen werden.

      Tipp

      Weitere Informationen zu diesen Eigenschaften finden Sie unter SharePoint-Framework: Bereitstellungsoptionen für SharePoint-Framework Lösungen für Microsoft Teams, insbesondere im Abschnitt Dynamischer Verweis auf die zugrunde liegenden UrLs der SharePoint-Website.

Hinweis

Weitere Informationen zur Microsoft Teams-App-Manifestdatei finden Sie unter Microsoft Teams: App-Manifestschema für Teams.

Erstellen des Microsoft Teams-App-Pakets

Nachdem Sie das Microsoft Teams-App-Manifest erstellt haben, müssen Sie das App-Paket manuell erstellen. Dies ist in Ihrer SharePoint-Paketdatei (*.sppkg) enthalten, die Sie in den App-Katalog Ihres SharePoint-Mandanten hochladen.

  1. Komprimieren Sie den Inhalt des Ordners ./teams in Ihrem Projekt.
  2. Benennen Sie das ZIP-Paket inTeamsSPFxApp.zipum.

Wichtig

Das Microsoft Teams-App-Paket muss TeamsSPFxApp.zip benannt und im Ordner ./teams gespeichert werden, damit diese Option mit der Schaltfläche Mit Teams synchronisieren im App-Katalog des Mandanten verwendet werden kann.

Bereitstellen der SPFx-basierten Microsoft Teams-App

Nachdem Sie das App-Paket erstellt haben, besteht der nächste Schritt darin, es bereitzustellen und zu installieren.

Stellen Sie die App im App-Katalog Ihres Mandanten bereit.

Wählen Sie dann die App aus, wählen Sie im Menüband die Registerkarte Dateien und dann die Schaltfläche Mit Teams synchronisieren aus, um das App-Paket im Microsoft Teams Store Ihres Mandanten bereitzustellen.

Hinweis

Weitere Informationen zum Packen & der Bereitstellung von SharePoint-Paketen im Microsoft Teams-App Store finden Sie unter SharePoint-Framework: Bereitstellungsoptionen für SharePoint-Framework Lösungen für Microsoft Teams.

Nachdem Sie die App in SharePoint bereitgestellt haben, können Sie sie als Webpart zu einer Seite in Ihren SharePoint-Websites hinzufügen:

Dashboard des Microsoft Teams-Lead-Assistenten in SharePoint

Die App kann auch in Microsoft Teams installiert werden. Nachdem Sie angemeldet sind, wählen Sie im linken vertikalen Navigationsbereich die Option Apps aus.

Beachten Sie, dass Ihre Apps im Abschnitt Erstellen für Ihre Organisation aufgeführt sind:

Microsoft Teams Lead Assistant Dashboard – Teams Add App-Optionen

Nachdem Sie die App installiert haben, wird sie in der linken vertikalen Navigation als angeheftete App angezeigt:

Microsoft Teams Lead Assistant Dashboard – Teams App hinzufügen installiert

Microsoft Teams-Beispiel-App – Lead Assist Dashboard

Sie können denselben Prozess ausführen, um die App in Outlook zu installieren, wie Sie in Microsoft Teams ausgeführt haben.

Tipp

Weitere Informationen finden Sie im Beispiel React Teams Lead Dashboard für ein funktionierendes Beispiel, das SPFx zum Erstellen einer Microsoft Teams-App für Outlook und Office verwendet.