Erstellen von Besprechungs-Apps für Microsoft Teams mit SPFx
Mit der Version SharePoint-Framework (SPFx) v1.8 wurde die Möglichkeit eingeführt, SPFx-Webparts zum Implementieren von Microsoft Teams-Registerkarten zu verwenden. Die Verwendung von SharePoint-Framework kann die Entwicklung von Microsoft Teams-Apps vereinfachen, wie unter Erstellen für Microsoft Teams mit SharePoint-Framework erläutert.
Entwickler können Apps für Microsoft Teams-Besprechungen mit den gleichen Techniken erstellen, die zum Erstellen benutzerdefinierter Registerkarten verwendet werden. In diesem Tutorial erfahren Sie, wie Sie eine benutzerdefinierte Microsoft Teams-Besprechungs-App mithilfe eines SPFx-Webparts implementieren.
Microsoft Teams-Besprechungs-Apps müssen konfigurierbare Registerkarten im Gruppenchatbereich unterstützen. Dies ermöglicht die Chats vor und nach der Besprechung . Weitere Anforderungen finden Sie in der folgenden Dokumentation: Erstellen von Apps für Teams-Besprechungen: Voraussetzungen und Überlegungen
Wichtig
Für dieses Tutorial ist SPFx v1.11 oder höher erforderlich.
Erstellen eines Projekts für Microsoft Teams-Registerkarten
Erstellen Sie an einem Speicherort Ihrer Wahl ein neues Projektverzeichnis:
md teams-meeting-appWechseln Sie in das Projektverzeichnis:
cd teams-meeting-appFühren Sie den Yeoman-SharePoint-Framework-Generator aus, um eine neue Lösung zu erstellen:
yo @microsoft/sharepointWenn Sie dazu aufgefordert werden, geben Sie die folgenden Werte ein (wählen Sie für alle unten nicht aufgeführten Eingabeaufforderungen die Standardoption aus):
- Wie lautet der Name Ihrer Lösung?: teams-meeting-app
- Möchten Sie dem Mandantenadministrator erlauben, festzulegen, ob die Lösung unmittelbar für alle Websites bereitgestellt wird, ohne die Bereitstellung von Features oder das Hinzufügen von Apps zu Websites? Ja
- Welcher Typ von clientseitiger Komponente soll erstellt werden? : WebPart
- Wie lautet ihr Webpartname?: MyFirstTeamsMeetingApp
- Wie lautet die Beschreibung Ihres Webparts?: Meine erste Microsoft Teams-Besprechungs-App
- Welches Framework möchten Sie verwenden?: kein JavaScript-Webframework
An diesem Punkt erstellt Yeoman die Ordnerdateien & für das Projekt und installiert dann die erforderlichen Abhängigkeiten.
Geben Sie als Nächstes Folgendes ein, um das Webpart-Projekt in Visual Studio Code zu öffnen:
code .
Aktualisieren Sie das Webpart-Manifest, um es für Microsoft Teams verfügbar zu machen
Suchen Sie die Datei ./src/webparts/**/manifest.json für das Webpart, das Sie als Registerkarte für die Besprechungs-App-Lösung verwenden. Suchen Sie die supportedHosts -Eigenschaft, die enthalten "TeamsTab"soll:
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "..",
"alias": "MyFirstTeamsMeetingAppWebPart",
"componentType": "WebPart",
"version": "*",
//...
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
//...
}
Aktualisieren Sie den Code, um den Microsoft Teams-Kontext zu berücksichtigen
Öffnen Sie ./src/webparts/helloWorld/MyFirstTeamsTabWebPart.ts, für die erforderlichen Änderungen, damit unsere Lösung den Microsoft Teams-Kontext beachtet, wenn sie als Registerkarte verwendet wird.
Aktualisieren Sie die Methode
render()wie folgt.Beachten Sie, wie unterschiedliche Inhalte wiedergegeben werden, abhängig davon, ob der Code als Registerkarte in Microsoft Teams oder als Webpart in SharePoint wiedergegeben wird. Wir können ermitteln, ob die Lösung von Microsoft Teams gehostet wird, indem wir die
this.context.sdks.microsoftTeams-Eigenschaft überprüfen.public render(): void { let title: string = 'ERR: not in Microsoft Teams'; let subTitle: string = 'ERR: not in Microsoft Teams'; if (this.context.sdks.microsoftTeams) { if (this.context.sdks.microsoftTeams.context.meetingId) { title = "Welcome to Microsoft Teams!"; subTitle = "We are in the context of following meeting: " + this.context.sdks.microsoftTeams.context.meetingId; } else { title = "Welcome to Microsoft Teams!"; subTitle = "We are in the context of following team: " + this.context.sdks.microsoftTeams.context.teamName; } } this.domElement.innerHTML = ` <div class="${ styles.myFirstTeamsMeetingApp }"> <div class="${ styles.container }"> <div class="${ styles.row }"> <div class="${ styles.column }"> <span class="${ styles.title }">${title}</span> <p class="${ styles.subTitle }">${subTitle}</p> </div> </div> </div> </div>`; }
Vorbereiten der Microsoft Teams-App für die Bereitstellung
Wenn eine SPFx-Lösung in einer Microsoft Teams-App verwendet wird, muss sie sowohl in SharePoint Online als auch in Microsoft Teams bereitgestellt werden. Ausführliche Informationen zu den Bereitstellungsoptionen finden Sie unter Bereitstellungsoptionen für SharePoint-Framework Lösungen für Microsoft Teams.
Besprechungs-Apps erfordern Details in der Microsoft Teams-App-Manifestdatei, die nicht automatisch von SharePoint Online erstellt werden. Daher müssen Sie die vom Entwickler bereitgestellte Microsoft Teams-App-Manifestpaketoption & verwenden.
Dies bedeutet, dass Sie die App-Manifestdatei und die App-Paketdatei erstellen müssen.
Erstellen des Microsoft Teams-App-Manifests
Erstellen Sie eine neue Datei ./teams/manifest.json.
Fügen Sie der Datei den folgenden JSON-Code hinzu:
{
"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
"manifestVersion": "1.8",
"packageName": "{{SPFX_PACKAGE_NAME}}",
"id": "{{SPFX_COMPONENT_ID}}",
"version": "1.0",
"developer": { .. },
"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}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26componentId={{SPFX_COMPONENT_ID}}",
"canUpdateConfiguration": false,
"scopes": [
"team",
"groupchat"
],
"context": [
"channelTab",
"privateChatTab",
"meetingSidePanel",
"meetingDetailsTab",
"meetingChatTab"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"resourceseng.blob.core.windows.net"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
}
Nachdem das grundlegende Teams-App-Manifest erstellt wurde, müssen Sie die folgenden Änderungen daran vornehmen:
- Suchen Sie die Werte
{{SPFX_COMPONENT_*}}im JSON-Code... Diese Werte müssen aktualisiert werden. Legen Sie die mehreren Instanzen von{{SPFX_COMPONENT_ID}}auf die ID der Komponente fest. Dies befindet sich in derid-Eigenschaft in der Datei ./src/webparts/**/manifest.json . - Ersetzen Sie die
packageNameEigenschaft durch den Namen Ihrer Teams-App. - Ersetzen Sie das
developerObjekt durch dasselbe Objekt und die gleichen Werte, die in Der Datei ./config/package-solution.json festgelegt sind. - Ersetzen Sie die
name&descriptionObjekte durch reelle Werte, die den Namen und die Beschreibung der App angeben.
Hinweis
Informationen zu den Eigenschaften im Microsoft Teams-App-Manifest finden Sie unter Manifestschema für Microsoft Teams.
Wichtig
Ersetzen Sie nicht die {teamSiteDomain} Zeichenfolge in der App-Manifestdatei. Dieser Platzhalter wird zur Laufzeit von Microsoft Teams durch die SharePoint Online-URL des Mandanten ersetzt.
Erstellen des Microsoft Teams-App-Pakets
Damit Ihre SPFx-Lösung für die Verwendung in Microsoft Teams verfügbar ist, muss sie in & SharePoint Online bereitgestellt werden.
Erstellen Sie das Microsoft Teams-App-Paket namens TeamsSPFxApp.zip durch Komprimieren des Inhalts des Ordners ./teams.
Wichtig
Komprimieren Sie nicht den Ordner, sondern den Inhalt des Ordners. Wenn Sie den Ordner zippen, wird ein Unterordner der obersten Ebene in der resultierenden ZIP-Datei erstellt, der kein gültiges App-Paket für Microsoft Teams ist.
Speichern Sie die TeamsSPFxApp.zip im Ordner ./src/teams der SPFx-Lösung.
Packen und Bereitstellen in SharePoint Online
Führen Sie die nachfolgenden Befehle aus, um Ihre Lösung in einem Bundle zu verpacken. Dadurch wird ein Versionsbuild des Projekts ausgeführt, indem eine dynamische Bezeichnung als Host-URL für Ihre Objekte verwendet wird.
gulp bundle --shipFühren Sie die folgende Aufgaben aus, um Ihre Lösung zu packen. Dadurch wird ein aktualisiertes ./sharepoint/solution/*.sppkg-Paket erstellt.
gulp package-solution --shipStellen Sie als Nächstes das paket bereit, das im App-Katalog des Mandanten generiert wurde.
Gehen Sie zum Microsoft Office SharePoint Online-App-Katalog Ihres Mandanten.
Laden Sie ./sharepoint/solution/*.sppkg hoch, oder ziehen Sie ihn in den App-Katalog des Mandanten.
Dadurch wird das clientseitige Lösungspaket bereitgestellt.
Stellen Sie sicher, dass die Option Diese Lösung für alle Websites in der Organisation verfügbar machen ausgewählt ist, damit das Webpart von Microsoft Teams verwendet werden kann.
Wählen Sie Bereitstellen.
An diesem Punkt wird die Lösung in SharePoint Online bereitgestellt und steht für alle SharePoint Online-Websites zur Verfügung.
Veröffentlichen der Besprechungs-App im Microsoft Teams App Store
Um Ihre Besprechungs-App in Microsoft Teams verfügbar zu machen, müssen Sie Ihre Lösung mit Teams synchronisieren.
Hinweis
Während der Testphase können Sie Ihre Besprechungs-App in Microsoft Teams querladen, anstatt sie im App Store Ihrer Organisation bereitzustellen. Dazu können Sie diesen Abschnitt überspringen und zum Abschnitt Testen der Besprechungs-App wechseln.
Wählen Sie das Paket im App-Katalog des SharePoint-Mandanten aus, und wählen Sie im Menüband auf der Registerkarte Dateien die Schaltfläche Mit Teams synchronisieren aus.
SharePoint Online erkennt die TeamsSPFxApp.zip-Datei im *.sppkg-Paket und stellt sie im Microsoft Teams App Store bereit, anstatt das App-Manifest und das App-Paket automatisch zu erstellen.
Vergewissern Sie sich, dass die Statusmeldung in der oberen rechten Ecke angezeigt wird.
Testen der Besprechungs-App
Der letzte Schritt besteht darin, die Besprechungs-App in Microsoft Teams zu testen. Dazu erstellen Sie eine Besprechung, die keine Kanalbesprechung ist und zu der mindestens eine Person eingeladen wird:
Öffnen Sie den Microsoft Teams-Desktopclient.
Erstellen Sie eine neue Besprechung mithilfe der Kalender-App in der linken App-Leiste.
Jemanden zu der Besprechung einladen.
Speichern Sie die Besprechung.
Öffnen Sie in der Kalender-App die von Ihnen erstellte Testbesprechung.
Wählen Sie die + Schaltfläche (Plus) rechts neben den vorhandenen Registerkarten aus.
Wählen Sie Ihre benutzerdefinierte Besprechungs-App aus.
Nachdem die App in der Besprechung installiert wurde, wird die App als neue Registerkarte angezeigt, wenn Sie zur Detailseite der Besprechung zurückkehren. Die Registerkarte wird in der Benutzeroberfläche vor/nach der Besprechung geladen, wie im folgenden Screenshot gezeigt:
Wichtig
Zum aktuellen Zeitpunkt funktioniert die Besprechungserfahrung für eine SPFx-basierte Teams-Besprechungs-App nicht. Wenn Sie während einer Besprechung die App auswählen, wird die Besprechungs-App auf einer Registerkarte geladen, aber eine SharePoint Online-Fehlerseite wird gerendert.
Dies ist derzeit auf eine Einschränkung in Microsoft Teams zurückzuführen, die im ersten Halbjahr 2021 behoben wird.