© Kellie L. Folkerts/Shutterstock.com
Einführung in das SharePoint-Framework (Teil 5)

Kolumne: SharePoint ganz praktisch


In der letzten Kolumne wurde gezeigt, wie der Bereitstellungsprozess innerhalb des SharePoint-Frameworks (kurz: SPFx) verläuft. Weiterhin wurden die wichtigsten SPFx-API-Methoden, Funktionen und Eigenschaften beispielhaft demonstriert. Außerdem wurde auf die Simulation von SharePoint-Daten eingegangen, um nicht direkt auf SharePoint zugreifen zu müssen. Die heutige Kolumne widmet sich der grafischen Oberfläche sowie dem Zugriff auf SharePoint-Daten.

Wie in der letzten Ausgabe deutlich wurde, bietet das SharePoint-Framework nicht nur ein neues Programmiermodell an, sondern stellt auch eine vollständige Entwicklungsumgebung bereit. In diesem Zusammenhang ermöglicht die SharePoint Workbench die Entwicklung und das Testen von clientseitigen SharePoint WebParts ohne eine SharePoint-Serverinstanz. Dadurch wird der Entwicklungsprozess wesentlich vereinfacht. In der vorherigen Ausgabe wurden bereits die wichtigsten API-Methoden vorgestellt, die bei der Umsetzung von clientseitigen WebParts mit hoher Wahrscheinlichkeit benötigt werden. Neben den rein funktionalen Erweiterungen bietet das SharePoint-Framework aber auch grafische Komponenten, die direkt eingesetzt werden können. Der Vorteil bei der Verwendung dieser Erweiterungen ist die nahtlose grafische Integration in SharePoint. Somit fügt sich ein eigenes clientseitiges WebPart perfekt in die SharePoint-Oberfläche ein und wirkt nicht als Fremdobjekt bzw. ist nicht direkt als externes WebPart erkennbar. Ein wenig ist das vergleichbar mit der Einbindung von SharePoint-Add-ins (vormals SharePoint-Apps), wobei das SharePoint User Interface ebenfalls in eigene Add-ins übernommen werden kann.

Die Office UI Fabric

Das SharePoint-Framework stellt für die bessere grafische Einbindung allerdings kein eigenes Framework zur Verfügung, sondern nutzt ebenfalls die Office UI Fabric [1]. Bei der Office UI Fabric handelt es sich um das offizielle Frontend-Framework für Office-basierte Lösungen. Laut der Projektbeschreibung ermöglicht das Framework die Entwicklung von eigenen Erweiterungen, die sich nahtlos in die Office- und Office-365-Umgebung integrieren. Die Office UI Fabric gliedert sich in Bibliotheken, wobei jede für eine bestimmte Zielplattform ausgelegt ist. Aktuell stehen die vier folgenden UI Fabrics zur Verfügung:

  • Office UI Fabric React
  • Office UI Fabric AngularJS
  • Office UI Fabric iOS
  • Office UI Fabric JS

Aus der jeweiligen Endung der oben gelisteten UI Fabric ergibt sich schon das entsprechende Einsatzgebiet. Die UI Fabric lässt sich aktuell gut für React- und iOS-Lösungen verwenden. Im Bereich Angular steht nur eine Version für Angular 1 (also AngularJS) bereit. Aktuell werden Möglichkeiten eruiert, die Office UI Fabric mit neueren Angular-Versionen nutzen zu können [2]. Die auf den ersten Blick anscheinend einfachste Verwendungsmöglichkeit – ohne jegliche weitere Abhängigkeit – stellt die Bibliothek Office Fabric JS dar. Hierbei handelt es sich um eine einfache JavaScript-Bibliothek, die wie üblich über ein script-Tag referenziert und eingebunden werden kann. Nach der Einbindung stehen dann die folgenden UI-Komponenten zur Verfügung: Breadcrumb, Button, Callout, Checkbox, ChoiceFieldGroup, CommandBar, CommandButton, ContextualMenu, DatePicker, Dialog, Dropdown, FacePile, Label, Link, List, ListItem, MessageBanner, MessageBar, OrgChart, Overlay, Panel, People Picker, Persona, PersonaCard, Pivot, ProgressIndicator, SearchBox, Spinner, Table, TextField und Toggle. Die direkte Verwendung der reinen JavaScript-Bibliothek ist allerdings nicht empfohlen (siehe auch [3]). Das liegt begründet in dem Entwicklungsverlauf der UI Fabric. Die Office UI Fabric hat sich in der letzten Zeit in zwei unabhängige Pakete geteilt:

  • Office UI Fabric Core
  • Office UI Fabric JavaScript

Das erste Paket enthält alle wesentlichen CSS-Eigenschaften für Typografie, Theme-Farben, Schriftarten für Icons usw. Dieses Paket enthält keinerlei interaktive Komponenten, sondern nur reine Darstellungsanweisungen. Dieses Paket ist automatisch Bestandteil jedes SharePoint-Framework-Projekts. Das JavaScript-Paket enthält dagegen alle interaktiven Komponenten. Zu Beginn verwendete dieses Paket jQuery für einen vereinfachten DOM-Zugriff. Mittlerweile wurde diese Abhängigkeit aber aufgelöst und alle Komponenten wurden nativ in JavaScript implementiert. Umgesetzt wurde das Paket mit der Zielsetzung, die Komponenten auch außerhalb von Office-Lösungen verwenden zu können. Allerdings hat sich der Entwicklungsfokus der UI Fabric zugunsten von React verschoben. D. h. in der Vergangenheit wurde die JS-Variante nicht mehr weiterentwickelt und die gesamte Entwicklerkapazität konzentriert sich seitdem auf die React-Version. Aus diesem Grund verwenden die nachstehenden Beispiele das React-Framework, da für Angular noch keine vollständige Projektvorlage existiert.

Office UI Fabric React

Anhand eines neuen clientseitigen WebParts wird nun die Einbindung und Verwendung von einigen UI-Fabric-Komponenten gezeigt. Zu Beginn wird wieder – wie bereits im Details in vorherigen Ausgaben erläutert – ein neues SharePoint-Framework-Projekt mit Yeoman erstellt. Für die neue Lösung wird im Vorfeld ...

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