Erstellen von Microsoft Teams-Registerkarten mit SharePoint Framework

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. Als Teil der SharePoint-Framework Version 1.10 können Sie Ihre Lösung auch als Microsoft Teams persönliche App veröffentlichen.

Die vorteile der Verwendung der SharePoint-Framework als Plattform für Ihre Microsoft Teams Registerkarten umfassen Folgendes:

  • Das Entwicklungsmodell ähnelt SharePoint-Framework Webparts
  • Jedes Webpart kann als Registerkarte oder persönliche App in Microsoft Teams
  • 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 Microsoft Teams Registerkarten beginnen, indem Sie einfach die Pakete SharePoint-Framework 1.8 oder höher verwenden. Die allgemeinen Schritte für die ersten Schritte sind wie folgt:

Hinweis

Lesen Sie die detaillierten Schritte für die ersten Schritte auf der Registerkarte "Building Microsoft Teams" mithilfe von SharePoint-Framework – Lernprogramm, das weitere wichtige Details enthält, die Sie befolgen müssen.

  1. Erstellen einer SharePoint-Framework-Lösung mit einem clientseitigen Webpart

  2. Fügen Sie "TeamsTab" der supportedHosts Eigenschaft des Webpartmanifests hinzu, um es als Registerkarte in einem Kanal zu verwenden:

    "supportedHosts": ["SharePointWebPart", "TeamsTab"],
    
  3. Fügen Sie "TeamsPersonalApp" der supportedHosts Eigenschaft des Webpartmanifests hinzu, um es als persönliche App zu verwenden:

    "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp"],
    
  4. Bereitstellen des Webparts mithilfe der mandantenweiten Bereitstellungsoption im SharePoint App-Katalog

  5. 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 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 des App-Katalogs verwenden, mit der das Microsoft Teams App-Manifest, das App-Paket automatisch erstellt und im Microsoft Teams Store installiert wird. 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. Informationen zu Bereitstellungsoptionen für SharePoint-Framework Lösungen für Microsoft Teams finden Sie unter Bereitstellungsoptionen.

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.

  1. Erstellen Sie Ihre SharePoint-Framework Lösung wie gewohnt:

    gulp bundle --ship
    gulp package-solution --ship
    
  2. Suchen Sie den Ordner "./teams" in Ihrem Projektordner:

    Lösungsstruktur

  3. 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.

  4. 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

  1. Wechseln Sie zu Ihrer Microsoft Teams Instanz, indem Sie im App-Startfeld Teams auswählen:

    ZIP-Datei im Explorer

  2. Wählen Sie ein Team aus, das Sie zum Testen der Funktion verwenden möchten, und wählen Sie im Menü "Team verwalten" ... aus:

    Verwalten des Teams

  3. Wechseln Sie zur Registerkarte "Apps".

  4. Wählen Sie in der unteren rechten Ecke Hochladen einer benutzerdefinierten App 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.

  5. Hochladen Sie die zuvor erstellte Microsoft Teams App-Manifestdatei aus dem Ordner "./teams" unter Ihrer neu erstellten Lösung, und stellen Sie sicher, dass sie in der Liste der Apps richtig sichtbar ist. Beachten Sie, dass das benutzerdefinierte Bild mit der Beschreibung der Lösung sichtbar ist:

    Hochladen-App

  6. 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" im Team aktiviert haben.

    Kanal aktiviert

  7. Wählen Sie + zum Hinzufügen einer neuen Registerkarte auf dem Kanal.

  8. Wählen Sie ihre benutzerdefinierte Registerkarte mit dem Namen "MyFirstTeamTab" in der Liste aus:

    Hinzufügen einer Registerkarte

  9. Beachten Sie, wie Sie die Registerkarteninstanz mithilfe der verfügbar gemachten Eigenschaften im Webpart anpassen können. Wählen Sie "Speichern" aus:

    Registerkarte "Konfigurieren"

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 einfach zugriff auf den Teams Kontext erhalten können, wenn Ihr Webpart als Registerkarte gerendert wird.

this.context.sdks.microsoftTeams

Hinweis

Weitere Informationen zum Kontext der Microsoft Teams Registerkarte finden Sie in Microsoft Teams Entwicklungsdokumentation.

Wichtig

Die Eigenschaft this.context.microsoftTeams ist in SharePoint-Framework Version 1.10 veraltet.

Sie sollten für alle Lösungen verwenden, this.context.sdks.microsoftTeams die mit der SharePoint-Framework v1.10 und höher erstellt wurden.

Siehe auch