Übung – Aktualisieren von Konfigurationseinstellungen
In dieser Übung aktualisieren Sie die Konfigurationseinstellungen für die SharePoint-Framework-Anwendung und die Konfigurationsdetails der Microsoft Teams-Anwendung.
Hinzufügen einer neuen benutzerdefinierten Eigenschaft
Suchen Sie die Datei ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.ts, und öffnen Sie sie.
Suchen Sie die Schnittstelle ISpFxTeamsTogetherWebPartProps.
Fügen Sie der Schnittstelle eine neue Eigenschaft hinzu:
customSetting: string;
Suchen Sie die render()-Methode in der SpFxTeamsTogetherWebPart-Klasse.
Suchen Sie die folgende Zeile in der render()-Methode:
<div>Web part property value: <strong>${escape(this.properties.description)}</strong></div>
Löschen Sie diese Zeile, und fügen Sie stattdessen die beiden folgenden Zeilen ein:
<div>Description property value: <strong>${escape(this.properties.description)}</strong></div>
<div>Custom setting property value: <strong>${escape(this.properties.customSetting)}</strong></div>
Scrollen Sie nach unten zur getPropertyPaneConfiguration()-Methode in der SpFxTeamsTogetherWebPart-Klasse.
Suchen Sie das Eigenschaftenbereich-Feldsteuerelement für die vorhandene description-Eigenschaft:
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
}),
Fügen Sie nach dem vorhandenen PropertyPaneTextField() ein Komma und den folgenden Code hinzu, um Benutzern die Möglichkeit zu geben, die Einstellung zu bearbeiten:
PropertyPaneTextField('customSetting', {
label: 'Custom Setting'
})
Hinzufügen eines Standardwerts für die neue Eigenschaft
Suchen Sie die Datei ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json, und öffnen Sie sie.
Suchen Sie das preconfiguredEntries[0].properties-Objekt.
Fügen Sie dem properties-Objekt die folgende Eigenschaft und den folgenden Wert hinzu:
"customSetting": "Default custom setting"
Packen und Bereitstellen des Webparts
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
Navigieren Sie zum Modernen Mandanten-App-Katalog (seite Apps verwalten ).
Suchen Sie die von der gulp-Aufgabe erstellte Datei im Ordner ./sharepoint/solution mit dem Namen *.sppkg.
Ziehen Sie diese Datei in die Bibliothek Apps für SharePoint im Browser. Wenn Sie dazu aufgefordert werden, wählen Sie Ersetzen aus.
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.
Wählen Sie im Bereich "Diese App wurde aktiviert " die Option "Schließen" aus.
Testen der Änderungen
Navigieren Sie zurück zu der SharePoint-Seite, auf der Sie in der vorherigen Übung das Webpart hinzugefügt haben, und aktualisieren Sie die Seite. Der Wert der benutzerdefinierten Eigenschaft ist anfangs leer, obwohl Sie in der Manifestdatei einen Standardwert dafür festgelegt haben. Der Standardwert wird nur für neue Webparts festgelegt.
Bearbeiten Sie die Seite, und fügen Sie der Eigenschaft Benutzerdefinierte Einstellung im Eigenschaftenbereich einen Wert hinzu. Beachten Sie, wie die Seite den Eigenschaftswert anzeigt:
Kehren Sie nun zum Microsoft Teams-Team zurück. Aktualisieren Sie die Seite, wenn Teams in einem Webbrowser geöffnet ist. Klicken Sie rechts neben der Registerkarte SPFx Teams Together auf den Pfeil nach unten, und wählen Sie Einstellungen aus.
Fügen Sie der Eigenschaft Benutzerdefinierte Einstellung im Eigenschaftenbereich einen Wert hinzu. Beachten Sie, wie die Registerkarte den Eigenschaftswert anzeigt:
Deaktivieren von Updates für die Konfiguration der Registerkarte
Suchen und öffnen Sie die folgende Datei im Projekt: teams/manifest.json.
Legen Sie den Wert der Eigenschaft version auf 0.2 fest.
Suchen Sie die Eigenschaft configurableTabs[0].canUpdateConfiguration.
Legen Sie den Wert dieser Eigenschaft auf false fest, und speichern Sie die Datei.
Suchen Sie den ./teams-Ordner im Projekt.
Löschen Sie das vorhandene Teams-App-Paket TeamsSPFxApp.zip.
Erstellen Sie das Teams-App-Paket neu, indem Sie ein neues ZIP-Archiv erstellen, 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.
Löschen der vorherigen Registerkarte "Microsoft Teams"
Wechseln Sie im Microsoft Teams-Client zur Registerkarte Allgemein in Mein erstes Team.
Klicken Sie rechts neben der Registerkarte SPFx Teams Together auf den Pfeil nach unten, und wählen Sie Entfernen aus.
Wenn Sie zu einer Eingabe aufgefordert werden, wählen Sie Entfernen aus.
Aktualisieren der zuvor installierten Microsoft Teams-App
Navigieren Sie zum Microsoft Teams Admin Center unter https://admin.teams.microsoft.com/.
Wählen Sie im Navigationsbereich Teams-Apps > Apps verwalten aus, suchen Sie nach SPFx Teams Together, und wählen Sie dann die App SPFx Teams Together aus :
Kontrollieren Sie im Bereich Apps verwalten \ SPFx Teams Together, dass die veröffentlichte Version 0.1 ist. Wählen Sie den Link Datei hochladen aus, um das aktualisierte Teams-App-Paket hochzuladen:
Wählen Sie im Dialogfeld App aktualisieren die Option Datei auswählen, und wählen Sie das neue Manifest der Microsoft Teams-App aus, das Sie gerade erstellt haben:
Gehen SIe zurück zum Bereich Apps verwalten \ SPFx Teams Together, um sicherzustellen, dass die veröffentlichte Version jetzt 0.2 ist:
Wählen Sie im Microsoft Teams-Client in der unteren rechten Ecke Apps aus, und wählen Sie dann im Menü der Randleiste Für Ihre Organisation erstellt und anschließend die App SPFx Teams Together aus.
Stellen Sie im Dialogfeld SPFx Teams Together sicher, dass die Version 0.2 ist. Falls nicht, warten Sie einige Minuten, und versuchen Sie es noch mal:
Testen der neuen Microsoft Teams-App
Wählen Sie das zuvor erstellte Team Mein erstes Team aus.
Wählen Sie den Kanal Allgemein aus.
Hinzufügen des SPFx-Webparts als Registerkarte
Klicken Sie oben auf der Seite auf das Pluszeichen (+) in der horizontalen Navigation:
Suchen und markieren Sie im Dialogfeld Registerkarte hinzufügen die App SPFx Teams Together:
Im nächsten Dialogfeld wird die Installation der App bestätigt. Klicken Sie auf Speichern.
Die Anwendung sollte nun in Microsoft Teams innerhalb des Kanals Allgemein unter der Registerkarte SPFx Teams Together geladen werden.
Beachten Sie, dass der Eigenschaftenbereich des Webparts standardmäßig geöffnet wird. Bearbeiten Sie die Werte der öffentlichen Eigenschaften des Webparts, und wählen Sie dann in der oberen rechten Ecke des Eigenschaftenbereichs das X aus, um die Erstkonfiguration zu schließen:
Kehren Sie nun zum Microsoft Teams-Team zurück. Klicken Sie rechts neben der Registerkarte SPFx Teams Together auf den Pfeil nach unten. Beachten Sie, dass die Option Einstellungen nicht mehr vorhanden ist. Der Grund dafür ist, dass die Einstellung im Microsoft Teams-Appmanifest angibt, dass die Konfiguration nicht aktualisiert werden kann, nachdem sie in Microsoft Teams installiert wurde.
Zusammenfassung
In dieser Übung haben Sie die Konfigurationseinstellungen für die SharePoint-Framework-Anwendung und die Konfigurationsdetails der Microsoft Teams-Anwendung aktualisiert.