Übung – Bereitstellen von SharePoint-Framework-Lösungen in Microsoft Teams
In dieser Übung erstellen Sie eine SharePoint-Framework-Webpartlösung, die sowohl in SharePoint Online als auch als Registerkarte in Microsoft Teams verwendet werden kann.
Voraussetzungen
Wichtig
In den meisten Fällen ist die Installation der neuesten Versionen folgender Tools die beste Option. Die hier aufgeführten Versionen wurden verwendet, als dieses Modul veröffentlicht und zuletzt getestet wurde.
- Node.js – v16.*
- Gulp-cli – v2.3.*
- Yeoman – v4.3.*
- Yeoman-Generator für SharePoint – v1.17.1
- Visual Studio Code
Erstellen eines neuen SharePoint-Framework-Projekts
Öffnen Sie eine Eingabeaufforderung, und wechseln Sie zu dem Ordner, in dem Sie das Projekt erstellen möchten.
Führen Sie dann den SharePoint-Yeoman-Generator aus, indem Sie den folgenden Befehl ausführen:
yo @microsoft/sharepoint
Verwenden Sie Folgendes, um die angezeigte Eingabeaufforderung zu vervollständigen (wenn weitere Optionen angezeigt werden, akzeptieren Sie die Standardantwort):
- Wie lautet der Name Ihrer Lösung? spfxteams
- Welcher Typ von clientseitiger Komponente soll erstellt werden?: WebPart
- Wie lautet der Name Ihres Webparts? SPFx Teams Together
- Welche Vorlage möchten Sie verwenden? Kein Framework
Nach der Bereitstellung der für das Projekt erforderlichen Ordner installiert der Generator alle Abhängigkeitspakete, indem npm install automatisch ausgeführt wird. Wenn NPM das Herunterladen aller Abhängigkeiten abgeschlossen hat, öffnen Sie das Projekt in Visual Studio Code.
Aktivieren des Webparts zur Verwendung in Microsoft Teams
Suchen Sie die Datei ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json, und öffnen Sie sie:
Suchen Sie in der Webpartmanifestdatei die Eigenschaft supportedHosts. Stellen Sie sicher, dass der Wert der Eigenschaft sowohl SharePointWebPart wie auch TeamsTab enthält. Es ist in Ordnung, wenn der Wert der Eigenschaft auch TeamsPersonalApp und/oder SharePointFullPage enthält:
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
Erstellen und Bereitstellen des Microsoft Teams-App-Pakets
Sie sehen, dass das Projekt den Ordner Teams mit zwei Bildern enthält. Diese werden in Microsoft Teams zum Anzeigen der benutzerdefinierten Registerkarte verwendet.
Hinweis
Möglicherweise stellen Sie fest, dass keine manifest.json-Datei vorhanden ist. Die Manifestdatei kann von Microsoft Office SharePoint Online automatisch aus der App-Katalog-Website generiert werden, oder Sie können sie manuell erstellen. Weitere Informationen zum manuellen Erstellen der Manifestdatei finden Sie in der Dokumentation: Bereitstellungsoptionen für SharePoint-Framework-Lösungen für Microsoft Teams.
In dieser Übung erstellen Sie die Microsoft Teams-Manifestdatei manuell, damit Sie sich mit dem Inhalt vertraut machen können.
Manuelles Erstellen des Microsoft Teams-Manifests
Suchen Sie den Ordner ./teams im Projekt.
Erstellen Sie eine neue Datei, manifest.json, im Ordner Teams, und fügen Sie den folgenden Code hinzu:
{
"$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.16",
"developer": {
"name": "Parker Porcupine",
"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 bestimmen, die ersetzt werden sollen. Die SharePoint-Framework-Komponenteneigenschaften befinden sich in der Webpart-Manifestdatei: ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json
| 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.
Manuelles Erstellen des Microsoft Teams-Manifests und -App-Pakets
Suchen Sie den Ordner ./teams im Projekt.
Erstellen Sie ein ZIP-Archiv, das die drei Dateien im Ordner enthält: die beiden Bilder und manifest.json.
Wichtig
Zippen Sie den Inhalt des Ordners, nicht den Ordner selbst.
Benennen Sie das ZIP-Archiv "TeamsSPFxApp.zip", und speichern Sie es im Teams-Ordner. Der Teams-Ordner sollte nun vier Dateien enthalten.
Erstellen und Bereitstellen des SharePoint-Pakets
Zum Testen des Webparts in SharePoint und Microsoft Teams muss es zuerst in einem App-Katalog bereitgestellt werden.
Erstellen Sie das Projekt, indem Sie eine Eingabeaufforderung öffnen und zum Stammordner des Projekts wechseln. Führen Sie anschließend den folgenden Befehl aus:
gulp build
Erstellen Sie dann ein Produktionspaket des Projekts, indem Sie den folgenden Befehl in der Befehlszeile im Stammverzeichnis des Projekts ausführen:
gulp bundle --ship
Erstellen Sie schließlich ein Bereitstellungspaket des Projekts, indem Sie den folgenden Befehl in der Befehlszeile im Stammverzeichnis des Projekts ausführen:
gulp package-solution --ship
Microsoft ist dabei, von der Benutzeroberfläche des klassischen App-Katalogs zu einer modernen App-Katalog-Oberfläche zu wechseln. Wenn der klassische App-Katalog angezeigt wird, können Sie den Link Neue Seite "Apps verwalten" ausprobieren auswählen, der oben auf der Seite angezeigt wird, oder ans Ende der URL der App-Katalogwebsite /_layouts/15/tenantAppCatalog.aspx hinzufügen. Beide Optionen sollten Sie zum modernen App-Katalog führen (d. h. zur Seite "Apps verwalten ").
Ziehen Sie das in den vorherigen Schritten erstellte Paket, das sich in der ./sharepoint/solution/spfxteams.sppkg des Projekts befindet, in die Bibliothek Apps für SharePoint.
Stellen Sie im Bereich App aktivieren sicher, dass das Optionsfeld Diese App aktivieren und zu allen Websites hinzufügen ausgewählt ist, und wählen Sie dann App aktivieren aus. Dadurch wird das Webpart allen Websitesammlungen im Mandanten zur Verfügung gestellt, einschließlich derjenigen hinter einem Microsoft Teams-Team:
Wählen Sie im Bereich Diese App wurde aktiviert die Option Schließen aus.
Der letzte Schritt besteht darin, die Microsoft Teams-App im Microsoft Teams-Store Ihres Mandanten zu veröffentlichen. Wählen Sie das hochgeladene SharePoint-Paket aus. Wählen Sie dann in der Befehlsleiste die Schaltfläche Zu Teams hinzufügen aus.
Testen des SharePoint-Framework-Webparts in SharePoint
Navigieren Sie im Browser zu einer modernen SharePoint-Seite.
Wählen Sie oben rechts auf der Seite die Schaltfläche Bearbeiten aus.
Wählen Sie im Browser die Schaltfläche mit dem Webpart-Symbol aus, um die Liste der verfügbaren Webparts zu öffnen:
Suchen Sie nach dem SPFx Teams Together-Webpart, und wählen Sie es aus.
Das SharePoint-Framework-Webpart wird auf der Seite angezeigt, wie in der folgenden Abbildung dargestellt:
Testen des SharePoint-Framework-Webparts in Microsoft Teams
Erstellen Sie zunächst ein neues Microsoft Teams-Team.
Rufen Sie mit dem gleichen Browser, in dem Sie bei SharePoint Online angemeldet sind, https://teams.microsoft.com auf. Wenn Sie dazu aufgefordert werden, laden Sie den Webclient.
Wenn Sie keine Teams in Ihrem Mandanten haben, wird das folgende Dialogfeld angezeigt. Andernfalls wählen Sie am Ende der Liste mit den Teams Teilnehmen oder Team erstellen aus:
Wählen Sie im Dialogfeld Team erstellen die Option Ganz neu erstellen aus:
Wählen Sie im Dialogfeld Welche Art von Team ist das?Öffentliches aus:
Legen Sie im Dialogfeld Einige kurze Angaben zu Ihrem öffentlichen Team den Teamnamen Mein erstes Team fest, und wählen Sie Erstellen aus.
Wählen Sie im Dialogfeld Mitglieder zu „Mein erstes Team“ hinzufügen die Option Überspringen aus.
Installieren der Microsoft Teams-Anwendung als neue Registerkarte
Wählen Sie das zuvor erstellte Team Mein erstes Team aus.
Wählen Sie den Kanal Allgemein aus.
Fügen Sie mithilfe des SharePoint-Framework-Webparts eine benutzerdefinierte Registerkarte zum Team hinzu.
Klicken Sie oben auf der Seite in der horizontalen Navigation auf das Pluszeichen (+):
Wählen Sie im Dialogfeld Registerkarte hinzufügenWeitere Apps aus.
Wählen Sie Erstellt für Ihre Organisationaus.
Wählen Sie die App SPFx Teams Together aus.
Wählen Sie im Dialogfeld SPFx Teams Together die Schaltfläche Zu einem Team hinzufügen aus.
Wählen Sie im nächsten Dialogfeld im Team Mein erstes Team den Kanal Allgemein und anschließend Einrichten einer Registerkarte aus.
Im nächsten Dialogfeld wird die Installation der App bestätigt. Klicken Sie auf Speichern.
Die Anwendung sollte nun in Microsoft Teams im Kanal Allgemein unter der Registerkarte SPFx Teams Together geladen werden.
Wählen Sie das X in der oberen rechten Ecke des Eigenschaftenbereichs aus, um die Erstkonfiguration zu schließen.
Zusammenfassung
In dieser Übung haben Sie eine SharePoint-Framework-Webpartlösung erstellt, die sowohl in SharePoint Online als auch als Registerkarte in Microsoft Teams verwendet werden kann.