Microsoft Teams und SharePoint-Framework – Entwicklungsübersicht

  • 11 Minuten

In diesem Lernprogramm erfahren Sie, wie Sie Ihre vorhandenen SharePoint-Framework-Entwicklungskenntnisse zum Erstellen von benutzerdefinierten Microsoft Teams-Apps verwenden können.

Erweiterbarkeitsoptionen für Microsoft Teams

Microsoft Teams bietet Entwicklern mehrere Erweiterbarkeitsoptionen.

Entwickler können eine benutzerdefinierte Microsoft Teams-App erstellen, die aus einer benutzerdefinierten Registerkarte in einem Team bestehen kann. Die App für benutzerdefinierte Teams kann auch vorhandene Bots, Messaging-Erweiterungen und Connectors enthalten.

Eine weitere Option für Entwickler ist das Erstellen eines benutzerdefinierten Bots, der Nachrichten von einem Benutzer in eins-zu-eins-Chats, Gruppenchats und im Kanal Unterhaltungen empfangen und beantworten kann. Bots sind eine großartige Möglichkeit zum Implementieren kurzer Interaktionen mit ihren Benutzern.

Übersicht – Erstellen einer "Microsoft Teams"-Registerkarte

In Microsoft Teams besteht ein Team aus mehreren Kanälen. Jeder Kanal verfügt über eine oder mehrere Registerkarten. Eine der beliebtesten Erweiterbarkeitsoptionen in den benutzerdefinierten Apps in Microsoft Teams ist die Erstellung benutzerdefinierter Registerkarten. Sehen wir uns an, was beim Erstellen einer benutzerdefinierten Registerkarte zu tun ist.

Entwerfen der benutzerdefinierten Registerkarte

Der erste Schritt besteht darin, Ihre Registerkarte zu entwerfen. Starten Sie mit der Identifizierung der relevanten Funktionen, die Sie auf der Registerkarte ausführen möchten. Registerkarten funktionieren am besten, wenn Sie auf eine bestimmte Anforderung ausgelegt sind. Konzentrieren Sie sich auf eine kleine Gruppe von Aufgaben oder eine Teilmenge der Daten, die für den Kanal relevant sind, in dem sich die Registerkarte befindet.

Eine Registerkarte in Microsoft Teams ist nur eine Webseite, die in einem <iframe>gerendert wird. Im Gegensatz zu einer normalen Webseite sollten Seiten, die als Registerkarten verwendet werden, Chrom reduzieren. Vermeiden Sie es, auf einer Registerkarte mehrere Panels zu erstellen, Navigationsebenen hinzuzufügen oder zu fordern, dass Benutzer auf einer Registerkarte sowohl vertikal als auch horizontal scrollen.

Überlegen Sie, wie Sie Ihre Registerkarte in die Microsoft Teams-Umgebung integrieren können. Sie können Benutzer beispielsweise über Registerkartenaktivitäten informieren, indem Sie Karten in Unterhaltungen teilen. Überlegen Sie sich, wie Sie Unterhaltungen um eine Registerkarte herum unterstützen können. Dadurch wird sichergestellt, dass sich die Unterhaltungen auf den jeweiligen Inhalt, die Daten oder den Prozess konzentrieren.

Entwickeln von benutzerdefinierten Registerkarten

Registerkarten sind nur Webseiten, die in einem <iframe> innerhalb des Microsoft Teams-Clients geladen werden. Es gibt keine technischen Voraussetzungen für eine bestimmte Webtechnologie oder -Plattform, die Entwickler implementieren oder verwenden können, um benutzerdefinierte Registerkarten zu erstellen. Letztendlich wird auf der Seite HTML und JavaScript verwendet, um die Benutzeroberfläche und Interaktionen zu implementieren.

Seiten, die Registerkarten implementieren, können REST-Dienste und sogar tiefere Links zu anderen Inhalten in anderen Kanälen und Teams in Microsoft Teams aufrufen.

Entwickler können alle gewünschten Tools verwenden, um benutzerdefinierte Registerkarten zu erstellen, von Visual Studio über Visual Studio Code, Eclipse, Webstorm von Jetbrains oder sogar Editor.

Bereitstellen Ihrer Registerkarte

Sie möchten Ihre Registerkarte in Microsoft Teams bereitstellen, sobald Sie diese erstellt haben. Sie registrieren Ihre Registerkarte in einer benutzerdefinierten Microsoft Teams-App. Der nächste Schritt besteht darin, Ihre Anwendung in Microsoft Teams zu integrieren.

Sie können Ihre benutzerdefinierte Microsoft Teams-App direkt in Microsoft Teams hochladen, sie in den App-Katalog Ihres Mandanten hochladen, damit jeder in Ihrer Organisation die App in ihrem Team installieren kann, oder sie zur Genehmigung einreichen, um sie in den Office Store aufzunehmen, damit jeder sie installieren und verwenden kann.

Registerkartenkonfiguration und -Inhalte

Die Konfiguration der Registerkarte befindet sich in der Manifestdatei Ihrer benutzerdefinierten Microsoft Teams-App. Die Manifestdatei definiert die unterschiedlichen Konfigurationsoptionen, die angezeigt werden, wenn die Registerkarte dem Kanal hinzugefügt wird.

Wenn Sie clientseitige Webparts von SharePoint-Framework zum Erstellen von Registerkarten für Microsoft Teams verwenden, werden Sie feststellen, dass die Konfiguration fast auf die gleiche Weise funktioniert. Es gibt einige geringfügige Unterschiede, die wir später im Modul untersuchen werden.

Denken Sie daran, dass der gesamte Inhalt einer Registerkarte in einem <iframe>gerendert wird. Ihre Registerkarten- und Konfigurationsseite enthält eine URL, die von Microsoft Teams verwendet wird, um den Speicherort der Seite zu kennen, die in der <iframe>geladen werden soll.

Auf der Registerkarte und der Konfigurationsseite wird der Microsoft Teams-Kontext verwendet, um die Registerkarten EntityId und SubEntityId zu prüfen. Hierbei handelt es sich um IDs, die Ihre Registerkarte eindeutig identifizieren. Das SubEntityId wird manchmal zum Aufbewahren einfacher Konfigurationsinformationen verwendet.

Interagieren mit Microsoft Teams über Registerkarten

Registerkarten können mit Microsoft Teams interagieren und Microsoft Teams kommuniziert mit einer Registerkarte auf zwei verschiedene Arten: über URL-Platzhalter und einen Kontext.

Abrufen des Microsoft Teams-Kontexts über URL-Platzhalter

Wenn eine Registerkarte geladen wird, werden bekannte Zeichenfolgen in der URL von Microsoft Teams ersetzt, bevor die Registerkarte geladen wird. So wird beispielsweise die ID der aktuellen Gruppe, des Kanals und des Designs hinzugefügt, wenn Sie {teamId}, {channelId}und {theme} einschließen. Diese Werte werden zur Laufzeit aufgelöst und Entwickler können die Registerkarte auf der Grundlage dieser Informationen anpassen.

Wenn die Registerkarte geladen wird, kann Sie beispielsweise das aktuelle Microsoft Teams-Client-Design abrufen, das vom Benutzer festgelegt wurde, und die Benutzeroberfläche der Registerkarte verwendet ein passendes Design. So erhalten Ihre Benutzer eine benutzerfreundliche Umgebung, weil die Registerkarte so aussehen und sich so anfühlen kann, als ob sie zu Microsoft Teams gehörte. Wenn der Benutzer das ausgewählte Design geändert hat, wird die URL aktualisiert und die Registerkarte kann das neu ausgewählte Design erkennen.

Abrufen des Microsoft Teams-Kontexts über die JavaScript-Bibliothek

Eine weitere Option, die auf der benutzerdefinierten Registerkarte zum Abrufen des Microsoft Teams-Kontexts verwendet werden kann, ist Microsoft Teams JavaScript-SDK. Sie können einen Kontext abrufen, indem Sie die microsoftTeams.getContext()-Methode aufrufen und einen Rückruf erfolgreich durchführen, der den aktuellen Microsoft Teams-Kontext zurückgibt.

In der folgenden Tabelle sind einige der beachtenswerten Eigenschaften aufgeführt, auf die Sie im Microsoft Teams-Kontext Zugriff haben:

Eigenschaft Beschreibung
teamId Die ID des aktuellen Teams.
channelId Die ID des aktuellen Kanals.
locale Das aktuelle Gebietsschema, das in Microsoft Teams in dem Kleinschriftformat "lang-locale" festgelegt ist.
theme Standard, dunkel oder Kontrast
entityId Die Entitäts-ID, die Sie auf Ihrer Konfigurationsseite festgelegt haben.
subEntityId Die ID der Unterentität, die Sie auf Ihrer Konfigurationsseite festgelegt haben.
upn Die Benutzer-ID im E-Mail-Format.
tid GUID, die die aktuelle Mandanten-ID identifiziert.
groupId GUID, die die aktuelle Office 365-Gruppen-ID identifiziert.

Vorteile der Verwendung von SharePoint-Framework zum Erweitern von Microsoft Teams

In 2019 hat Microsoft die Möglichkeit zur Verwendung eines clientseitigen SharePoint-Framework-Webparts als Registerkarte in Microsoft Teams eingeführt. Wie bereits erwähnt, ist eine Microsoft Teams-Registerkarte nur eine Webseite, die in einem <iframe>geladen wird.

Der Entwicklungsprozess einer Microsoft Teams-Registerkarte, die mithilfe eines clientseitigen Webparts von SharePoint-Framework implementiert ist, ist nahezu identisch mit dem Erstellen eines Webparts für eine SharePoint-Website. Jedes Webpart kann als Registerkarte in Microsoft Teams verfügbar gemacht werden.

Um das Verwenden eines clientseitigen Webparts als Registerkarte in Microsoft Teams zu ermöglichen, müssen Sie eine einzelne Eigenschaft im Manifest der Komponente aktualisieren.

Bei Verwendung eines clientseitigen Webparts als Host für die Registerkarte „Microsoft Teams“ ist die URL für die Registerkarte eine Seite in SharePoint Online, die nur einen Zeichenbereich auf der Seite enthält. Die URL-Parameter teilen der SharePoint-Seite mit, welches Webpart in den Zeichenbereich geladen werden soll. Diese URL wird in der verwendet, die <iframe> die Registerkarte implementiert.

Die Registerkarte oder das clientseitige Webpart wird im Kontext der zugrunde liegenden SharePoint-Website hinter dem Team ausgeführt, dem die Registerkarte hinzugefügt wird. Durch das Hosting der Registerkarte in SharePoint können Entwickler die SharePoint-Framework-API in ihren benutzerdefinierten Registerkarten nutzen. Da das clientseitige Webpart beispielsweise in SharePoint Online ausgeführt wird, können Sie über die SharePoint-Framework-API auf die gesicherten Endpunkte der SharePoint-REST-API, Microsoft Graph und Microsoft Entra ID zugreifen, ohne die erneute Authentifizierung des Benutzers erzwingen zu müssen.

So lassen sich SharePoint-Framework-Webparts als Microsoft Teams-Registerkarten anzeigen

Der Vorgang des Konfigurierens eines clientseitigen SharePoint-Framework-Webparts, das als Registerkarte in Microsoft Teams verwendet werden soll, ist einfach. Vorausgesetzt, Sie haben Ihr clientseitiges Webpart im SharePoint-Framework erstellt und getestet, es gibt drei Schritte, die auszuführen sind:

  1. Angeben, dass das Webpart eine Registerkarte sein kann: Finden Sie die Manifestdatei des Webparts. Suchen Sie in der -Manifestdatei nach dem Eigenschaftsarray supportedHosts: Die Eigenschaft "supportedHosts" listet alle unterschiedlichen Orte auf, an denen das Webpart ausgeführt werden kann. Standardmäßig enthält sie einen einzigen Eintrag SharePointWebPart. Zum Konfigurieren des Webparts, das als Registerkarte in Microsoft Teams verwendet werden soll, fügen Sie TeamsTab zum Array hinzu.
  2. Erstellen von Registerkartenabbildungen in Microsoft Teams: Wenn Sie ein neues SharePoint-Framework-Projekt erstellen, erstellt es einen Ordner ./teams im SharePoint-Projekt mit zwei Abbildungen. Die Bilder mit den Namen {SP_COMPONENT_GUID}_color.pngund {SP_COMPONENT_GUID}_outline.pngwerden von Microsoft Teams verwendet, wenn Ihre Registerkarte angezeigt wird. Sie können diese Standardbilder durch Ihre eigenen benutzerdefinierten Images ersetzen, aber stellen Sie sicher, dass Sie die Größe oder die Namen der Dateien nicht ändern.
  3. Erstellen eines Microsoft Teams-App-Manifests: alle Microsoft Teams-Apps benötigen ein App-Manifest, das die App beschreibt. Sie können das Manifest selbst erstellen oder Sie können es von SharePoint erstellen lassen.

Erstellen eines Microsoft Teams-App-Manifests und Bereitstellen für Microsoft Teams

Das Microsoft Teams-App-Manifest teilt Microsoft Teams Ihre benutzerdefinierte App mit. Sie enthält den Namen und den Speicherort der Bilder, den Namen und die Beschreibung der Registerkarten, den Speicherort der Anwendung und andere Metadaten zur App.

Wenn Sie ein clientseitiges SharePoint-Framework-Webpart als Registerkarte verwenden, können Sie das App-Manifest selbst erstellen oder SharePoint es für Sie erstellen lassen.

Nachdem Sie das SharePoint-Paket im SharePoint-App-Katalog hochgeladen und bereitgestellt haben, werden Sie eine Schaltfläche Zu Teams hinzufügen in der Befehlsleiste bemerken, wenn Sie das Paket auswählen.

Screenshot des App-Katalogs mit Schaltfläche

Wenn Sie die Schaltfläche Zu Teams hinzufügen auswählen, sucht SharePoint nach einem benutzerdefinierten Teams-App-Paket mit dem Namen TeamsSPFxApp.zip im Ordner ./teams Ihres Projekts. Wenn SharePoint diese Datei nicht findet, werden das Teams-App-Manifest und -Paket dynamisch erstellt. SharePoint stellt dann das Teams-App-Paket (benutzerdefiniert oder generiert) im Teams-App-Store des Mandanten bereit. Weitere Informationen finden Sie in der Dokumentation: Bereitstellungsoptionen für SharePoint-Framework-Lösungen für Microsoft Teams.

Der folgende Code enthält die Standardvorlage für die manifest.json-Datei, die Sie als Vorlage verwenden können, wenn Sie Ihr eigenes Manifest erstellen:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "manifestVersion": "1.16",
  "packageName": "{{SPFX_COMPONENT_ALIAS}}",
  "id": "{{SPFX_COMPONENT_ID}}",
  "version": "0.1",
  "developer": {
    "name": "Contoso Developer",
    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
  },
  "name": {
    "short": "{{SPFX_COMPONENT_NAME}}"
  },
  "description": {
    "short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}",
    "full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}"
  },
  "icons": {
    "outline": "{{SPFX_COMPONENT_ID}}_outline.png",
    "color": "{{SPFX_COMPONENT_ID}}_color.png"
  },
  "accentColor": "#004578",
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "validDomains": [
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "*.sharepoint-df.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],
  "webApplicationInfo": {
    "resource": "https://{teamSiteDomain}",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }
}

Diese Datei enthält mehrere Zeichenfolgen, die entsprechend der SharePoint-Framework-Komponente aktualisiert werden müssen. Verwenden Sie die folgende Tabelle, um die Werte zu ermitteln, die ersetzt werden sollen.

manifest.json-Zeichenfolge Eigenschaft im SharePoint-Framework-Komponentenmanifest
{{SPFX_COMPONENT_ALIAS}} alias
{{SPFX_COMPONENT_NAME}} preconfiguredEntries[0].title.default
{{SPFX_COMPONENT_SHORT_DESCRIPTION}} preconfiguredEntries[0].description.default
{{SPFX_COMPONENT_LONG_DESCRIPTION}} preconfiguredEntries[0].description.default
{{SPFX_COMPONENT_ID}} id

Wichtig

Vergessen Sie nicht, {{SPFX_COMPONENT_ID}} in configurableTabs[0].configurationUrl zu ersetzen. Wahrscheinlich müssen Sie im Editor nach rechts scrollen, um es anzuzeigen.

Wichtig

Die Token, die von einzelnen geschweiften Klammern umgeben sind (z. B. {teamSiteDomain}), müssen nicht ersetzt werden.

Zusammenfassung

In diesem Lernprogramm haben Sie erfahren, wie Sie Ihre vorhandenen SharePoint-Framework-Entwicklungskenntnisse zum Erstellen von benutzerdefinierten Microsoft Teams-Apps verwenden können.