© Kellie L. Folkerts/Shutterstock.com
SPFx: Einsatz von wiederverwertbaren UI-Komponenten

Kolumne: SharePoint ganz praktisch


In der letzten Ausgabe dieses Magazins wurden unter anderem die Office-UI-Fabric-Komponenten vorgestellt und deren Verwendung innerhalb von SharePoint Framework Webparts gezeigt. Neben diesen Steuerelementen können noch erweiterte Komponenten verwendet werden. Diese sogenannten wiederverwertbaren Steuerelemente übernehmen neben der Darstellung auch noch weitere Aufgaben.

Wie im letzten Teil demonstriert wurde, stehen innerhalb der Office-UI-Fabric-Komponenten-Bibliothek zahlreiche Steuerelemente zur Verfügung, die direkt für eigene clientseitige Webparts verwendet werden können. Durch den Einsatz dieser Komponenten wird dem Entwickler schon einiges an Arbeit abgenommen, und die Steuerelemente fügen sich nahtlos in das Look-and-Feel der Office-Umgebung ein. Somit entstehen durch den Einsatz der Steuerelemente automatisch Benutzeroberflächen, die sich sehr gut in Office-basierte Arbeitsumgebungen integrieren. Das ist insbesondere für Webparts ein wichtiger Punkt, damit diese auf einer SharePoint-Seite nicht wie ein Fremdkörper erscheinen. Bei genauerer Betrachtung können bei der Entwicklung von Webparts bestimmte Programmiermuster erkannt werden, die sich ständig wiederholen. Ein typisches Beispiel dafür ist die Auswahl einer Liste innerhalb der Webpart-Eigenschaften. Die ausgewählte Liste wird dann im späteren Verlauf durch das Webpart verarbeitet und Einträge werden auf der Oberfläche ausgegeben. Für die visuelle Darstellung und Auswahl der Liste kann dafür aus der Office UI Fabric ein geeignetes Steuerelement, wie zum Beispiel die Drop-down-Liste, eingesetzt werden. Anschließend muss dann auf SharePoint zugegriffen werden, um die verfügbaren Listen der aktuellen Website (SP Web) zu ermitteln. Sind diese ermittelt und geladen, muss die Auswahlliste damit gefüllt werden.

Und der REST?

Hierbei besteht dann auch oft die Anforderung, nur bestimmte Listentypen – wie zum Beispiel ausschließlich Dokumentenbibliotheken – zur Auswahl anzubieten. Innerhalb eines clientseitigen SPFx-basierten Webparts bedeutet das, unter Verwendung des SharePoint REST API auf SharePoint zuzugreifen. Ein weiteres und komplexeres Beispiel ist die Nutzung und Einbindung des Terminologiespeichers (Term Store) in die Webpart-Eigenschaften. Hierzu muss der Entwickler programmatisch selbst den Terminologiespeicher über die REST-Schnittstelle abfragen. Diese und weitere Szenarien werden durch den Einsatz der sogenannten wiederverwertbaren Komponenten (engl.: Reusable Controls) nun besser unterstützt. Diese Komponenten nutzen intern die Office-UI-Fabric-Steuerelemente, erweitern sie aber um spezielle SharePoint-Funktionalitäten. Diese übernehmen dann teilweise im Hintergrund die Kommunikation mit SharePoint und führen REST-basierte Zugriffe eigenständig aus. Für das erste oben geschilderte Szenario – die Auswahl einer SharePoint-Liste innerhalb der Webpart-Eigenschaften – steht eine wiederverwertbare Komponente zum direkten Einsatz bereit. Sobald diese Komponente in den Bereich für die Webpart-Eigenschaften platziert wurde, lädt sie automatisch die verfügbaren Listen in eine Auswahlliste. Für die Auswahl von Begriffen aus dem Terminologiespeicher steht ebenfalls eine entsprechende wiederverwertbare Komponente bereit. Neben diesen zwei exemplarisch genannten Komponenten stehen noch weitere zum Einsatz bereit, die helfen, typische Anforderungen an ein Webpart einfacher realisieren zu können.

Nutzung der wiederverwertbaren Komponenten

Bevor jedoch die Komponenten verwendet werden können, müssen sie installiert werden. Die Komponenten können über den Node-Paketmanager einem SharePoint-SPFx-Projekt hinzugefügt werden. Aktuell gliedern sich die verfügbaren Komponenten in zwei Pakete: Komponenten speziell für Webpart-Eigenschaften und Komponenten für die Webpart-Oberfläche.

Die ersten Komponenten werden über den Befehl npm install @pnp/spfx-property-controls --save --save-exact einen SharePoint-SPFx-Projekt hinzugefügt. Dieses Paket enthält die folgenden Komponenten:

  • PropertyFieldColorPicker
  • PropertyFieldDateTimePicker
  • PropertyFieldListPicker
  • PropertyFieldPeoplePicker
  • PropertyFieldSpinButton
  • PropertyFieldTermPicker
  • PropertyFieldMultiSelect
  • PropertyFieldNumber

Tabelle 1 erläutert jeweils den vorgesehenen Verwendungszweck der einzelnen Komponenten. Wie Tabelle 1 ebenfalls zeigt, gibt es noch zahlreiche XXXCallout-Steuerelemente. Diese ermöglichen das Einblenden eines zusätzlichen Hilfetexts, um dem Benutzer weitere Informationen zu der Einstellung zu geben. Für das zweite Paket wird ein Projekt über den Node-Befehl npm install @pnp/spfx-controls-react --save --save-exact hinzugefügt. Dieses beinhaltet spezielle Komponenten für den Einsatz auf der Webpart-Oberfläche.

Steuerelement

Funktion

PropertyFieldColorPicker

Auswahl einer Farbe

PropertyFieldDateTimePicker

Auswahl eines Datums mit Zeit

PropertyFieldListPicker

Auswahl einer SharePoint-Liste

PropertyFieldPeoplePicker

Auswahl einer Person oder einer Gruppe

PropertyFieldSpinButton

Erleichterte Zahleneingabe

PropertyFieldTermPicker

Auswahl von Begriffen aus dem Terminologiespeicher

PropertyFieldMultiSelect

Auswahl mehrerer Werte

PropertyFieldNumber

Eingabe ausschließlich von Zahlen

PropertyFieldButtonWithCallout

Schaltfläche mit zusätzlichem Text

Property...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang