Erstellen von Microsoft Teams-Registerkarten mit SharePoint Framework

Artikel
03/21/2023

Ab SharePoint-Framework Version 1.8 können Sie Registerkarten für Microsoft Teams mit den SharePoint-Framework-Tools erstellen und SharePoint als Host für Ihre Lösungen verwenden. Im Rahmen der SharePoint-Framework v1.10 können Sie Ihre Lösung auch als persönliche Microsoft Teams-App veröffentlichen.

Die Verwendung des SharePoint-Framework als Plattform für Ihre Microsoft Teams-Registerkarten bietet folgende Vorteile:

Das Entwicklungsmodell ähnelt SharePoint-Framework Webparts.
Jedes Webpart kann als Registerkarte oder persönliche App in Microsoft Teams verfügbar gemacht werden.
Die verschiedenen Bereichsoptionen zum Verfügbarmachen einer benutzerdefinierten Registerkarte als Webpart und Registerkarte in Ihrem Mandanten
Die Registerkarte wird im Kontext der zugrunde liegenden SharePoint-Website hinter dem jeweiligen Team ausgeführt. Dies bedeutet, dass Sie beliebige SharePoint-spezifische APIs oder Funktionen in Ihrem Webpart verwenden können.

Entwicklungsprozess

Sie können mit der Entwicklung von Microsoft Teams-Registerkarten beginnen, indem Sie einfach die Pakete SharePoint-Framework 1.8 oder höher verwenden. Die allgemeinen Schritte für den Einstieg lauten wie folgt:

Hinweis

Lesen Sie die ausführlichen Schritte für die ersten Schritte auf der Registerkarte Erstellen von Microsoft Teams mithilfe von SharePoint-Framework – Tutorial, das zusätzliche wichtige Details enthält, die Sie befolgen müssen.

Erstellen einer SharePoint-Framework-Lösung mit einem clientseitigen Webpart
Fügen Sie "TeamsTab" der supportedHosts -Eigenschaft des Webpartmanifests hinzu, um es als Registerkarte in einem Kanal zu verwenden:
```
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
```
Fügen Sie "TeamsPersonalApp" der supportedHosts -Eigenschaft des Webpartmanifests hinzu, um es als persönliche App zu verwenden:
```
"supportedHosts": ["SharePointWebPart", "TeamsPersonalApp"],
```
Bereitstellen des Webparts mithilfe der mandantenbezogenen Bereitstellungsoption in Ihrem SharePoint-App-Katalog
Aktivieren Sie die SharePoint-Framework Lösung, die Sie bereitgestellt haben, und wählen Sie im App-Katalog die Schaltfläche Mit Teams synchronisieren aus.

Bereitstellungsoptionen

Es gibt mehrere Optionen zum Bereitstellen der Microsoft Teams-Registerkarte oder als persönliche App. Da sowohl SharePoint als auch Microsoft Teams über einen eigenen App-Katalog verfügen, sind für die Bereitstellung Aktionen in beiden Diensten erforderlich. Die Sichtbarkeit der neuen Funktionalität kann durch die ausgeführten Bereitstellungsschritte gesteuert werden.

Mandantenbereitstellung

Sie können die Schaltfläche Mit Teams synchronisieren im Menüband App-Katalog verwenden, mit der automatisch das Microsoft Teams-App-Manifest und das App-Paket erstellt und im Microsoft Teams Store installiert werden. Dadurch wird Ihre Lösung für alle Benutzer in Ihrem Mandanten und Microsoft Teams-Teams verfügbar.

Entwickler können auch den Inhalt des Microsoft Teams-App-Manifests und des App-Pakets definieren. Bereitstellungsoptionen finden Sie unter Bereitstellungsoptionen für SharePoint-Framework Lösungen für Microsoft Teams.

Alternative Bereitstellungsoptionen

Es gibt eine alternative Möglichkeit zum Bereitstellen Ihrer Lösung, mit der Sie beispielsweise eine Lösung nur für ein bestimmtes Team in Ihrem Mandanten verfügbar machen können.

Erstellen Sie Ihre SharePoint-Framework Lösung auf normale Weise:
```
gulp bundle --ship
gulp package-solution --ship
```
Suchen Sie den Ordner ./teams in Ihrem Projektordner:
Fügen Sie das Microsoft Teams-App-Paket wie unter Bereitstellungsoptionen für SharePoint-Framework Lösungen für Microsoft Teams beschrieben zum Ordner ./teams hinzu.
Fügen Sie Ihre Lösung zum App-Katalog hinzu, und wählen Sie die Option Diese Lösung für alle Websites in der Organisation verfügbar machen aus, bevor Sie Bereitstellen auswählen.

Querladen externer Apps in Teams

Wechseln Sie zu Ihrer Microsoft Teams-Instanz , indem Sie teams im App-Startfeld auswählen:
Wählen Sie ein Team aus, das Sie zum Testen der Funktion verwenden möchten, und wählen Sie im ... Menü Team verwalten aus:
Wechseln zur Registerkarte "Apps ".
Wählen Sie in der unteren rechten Ecke benutzerdefinierte App hochladen aus.

Hinweis

Wenn diese Einstellung nicht verfügbar ist, ist das Laden der Seite in dem von Ihnen verwendeten Mandanten nicht aktiviert. Überprüfen Sie die Einstellungen in der Benutzeroberflächen des Mandantenadministrators.
Laden Sie die zuvor erstellte Microsoft Teams-App-Manifestdatei aus dem Ordner ./teams unter Ihrer neu erstellten Lösung hoch, und stellen Sie sicher, dass sie in der Liste der Apps ordnungsgemäß angezeigt wird. Beachten Sie, wie das benutzerdefinierte Image mit der Beschreibung der Lösung angezeigt wird:
Wechseln Sie zu einem Kanal im Team, in den Sie die Lösung hochgeladen haben. Beachten Sie in der folgenden Abbildung, dass wir den Kanal Allgemein in Team aktiviert haben.
Wählen Sie + zum Hinzufügen einer neuen Registerkarte auf dem Kanal.
Wählen Sie ihre benutzerdefinierte Registerkarte mit dem Namen MyFirstTeamTab in der Liste aus:
Beachten Sie, wie Sie die Registerkarteninstanz mithilfe der verfügbar gemachten Eigenschaften im Webpart anpassen können. Wählen Sie Speichern aus:

Ermitteln, ob sich das Webpart im Teams-Kontext befindet

Der Seitenkontext in einem Webpart enthält einen Verweis auf das Teams JavaScript SDK, sodass Sie problemlos Zugriff auf den Teams-Kontext erhalten können, wenn Ihr Webpart als Registerkarte gerendert wird.

this.context.sdks.microsoftTeams.teamsJs.app.getContext()

Hinweis

Weitere Informationen zum Microsoft Teams-Registerkartenkontext finden Sie in der Microsoft Teams-Entwicklungsdokumentation.

Wichtig

Der Prozess zum Abrufen des Microsoft Teams-Kontexts mit der SPFx-API hat sich im Laufe der Zeit einige Male geändert. Möglicherweise sind Sie beispielsweise mit den folgenden Eigenschaften vertraut, die den Microsoft Teams-Kontext zurückgeben würden:

Die -Eigenschaft this.context.microsoftTeams wurde in version 1.10 SharePoint-Framework veraltet.
Die -Eigenschaft this.context.sdks.microsoftTeams wurde im SharePoint-Framework v1.16-Release als veraltet gekennzeichnet.

Welche Teams JavaScript-Client-SDK-Version soll verwendet werden?

Die SharePoint-Framework ermöglicht den Zugriff auf die Teams JavaScript-Client-SDK-Instanz und den Kontext mithilfe sdks.microsoftTeams.teamsJs.app.getContext() der -Methode in der API des Kontexts.

Die Verwendung dieser API stellt sicher, dass die unterstützte Version des Teams JavaScript-Client-SDK geladen und initialisiert wird.

Einige Details, die Sie beachten sollten:

Das Installieren und Initialisieren benutzerdefinierter Versionen des Teams JavaScript-Client-SDK wird nicht unterstützt. Dies gilt für alle SPFx-Komponenten, einschließlich Webparts, Erweiterungen, adaptive Karten und Bibliotheken.
Obwohl Teams JavaScript-Client-SDK-Typen an die in der Lösung verwendete SPFx-Version gebunden sind, kann die tatsächliche Version, die in den Mandanten geladen wird, abweichen. Wir garantieren abwärtskompatibilität auf unserer Seite. Beispielsweise verfügt eine mit SPFx 1.14 erstellte Lösung über Typen aus dem Teams JavaScript-Client-SDK v1.10.0 und SPFx v1.15.2 über Typen aus dem Teams JavaScript-Client-SDK v1.12.1, aber die tatsächliche geladene Version des Teams JavaScript-Clients kann v2.1.0 sein.