zum Inhalt

Der lise Blog:
Einsichten, Ansichten, Aussichten

WebParts ganz easy mit dem SharePoint Framework erstellen!

18. Dezember 2018 von Avatar of SörenSören

Das SharePoint Framework, kurz SPFx, ist eine neue Technologie, die SharePoint-Entwicklern eine bequeme Art und Weise zur Entwicklung von clientseitigen WebParts bietet. Hierbei kommen die üblichen Technologien wie JavaScript, HTML und CSS zum Einsatz. Wir zeigen dir, wie du die WebParts am besten entwickelst!

Unterstützt werden viele moderne Open-Source-Tools und -Technologien. Als Entwicklungstools werden Node.js, NPM, Yeoman, WebPack und Gulp verwendet. Gecodet wird mit Microsofts Skript-Sprache TypeScript, HTML und SASS bzw. CSS. Als JavaScript-Framework steht dir die volle Bandbreite an Frameworks zur Verfügung. Hier wird dir nichts vorgeschrieben, was die Entwicklung noch bequemer macht. Üblicherweise werden aber Angular, React oder Knockout verwendet. Diese WebParts können nur in SharePoint Online sowie dem lokalen SharePoint 2016 mit dem Feature Pack 2 und dem brandneuen SharePoint 2019 verwendet werden. Ältere SharePoint-Versionen werden nicht unterstützt.

Diesem Nachteil stellt das SharePoint-Framework viele Vorteile entgegen. Zum einen ist ein sehr schnelles Testing möglich, da das zeitaufwendige Deploying, wie bei der WebPart-Entwicklung in C#, entfällt. Es werden lediglich die entsprechenden Dateien im SharePoint-Hive ausgetauscht. Zum anderen sind diese WebParts wesentlich schneller und zuverlässiger, da die App im Kontext des Users ausgeführt wird. Nur API- und Rest-Anfragen werden an das Backend gesendet. Die restliche Arbeit geschieht clientseitig. Die Arbeitslast wird so auf Server und Client verteilt. Hierdurch wird auch ein reaktives User-Interface möglich, das heißt der User bekommt direkt ein Feedback, wenn er beispielsweise einen Button klickt oder etwas in ein Inputfeld eingibt. Das liegt unter anderem daran, dass der Entwickler Einfluss und Zugriff auf den Lifecycle der App hat.

Ein weiterer Vorteil des SPFx ist, dass die Apps auch für Mobilgeräte geeignet sind. So bist du auch in Bezug auf ein Responsive Design auf der sicheren Seite. Sehr praktisch: die Workbench im Localhost. Hier kannst du dein WebPart ohne großen Aufwand testen.

Hinzufügen eines WebParts zu einer SharePoint-Seite

Um ein mit SPFx entwickeltes WebPart in SharePoint zu integrieren, gibt es zwei Methoden:

  1. JavaScript über Script-Editor einbinden

Diese Methode ist einfach erklärt: Du fügst das allseits beliebte Script-Editor-WebPart auf der Seite ein und kopierst entweder den Inhalt des JavaScripts hinein oder bindest es via HTML-Tag ein.

Das ist sehr vorteilhaft, da das Script-Editor-WebPart bekanntermaßen sehr leistungsstark ist. Dadurch ist das eingebundene WebPart hochperformant und schnell. Jedoch ist dies auch von Nachteil, da ein Nutzer das Skript manipulieren und es deshalb nicht mehr laufen oder Schaden anrichten könnte. Auch funktioniert diese Methode nicht in SiteCollections, die das NoScript-Feature aktiviert haben.

  1. SharePoint-Add-In-Modell

Dies ist die übliche Art, ein WebPart in seine Seite einzubinden. Der User kann das WebPart, wie gewohnt, über die Menüleiste auswählen und hinzufügen. Der Admin muss zuvor lediglich die Dateien in die entsprechenden Verzeichnisse legen, damit das WebPart im Menü angezeigt wird.

Ein klarer Vorteil hier ist natürlich, dass das WebPart so in allen SiteCollections ausgeführt werden kann. Außerdem wird das WebPart in einem iFrame gekapselt, was die ganze Sache sicherer macht. Leider ist das iFrame auch ein Nachteil, da es im Gegensatz zum Script-Editor-WebPart wesentlich langsamer ist. Im Endeffekt bleibt es dir überlassen, welche Methode du verwendest.

Mehr Informationen zu diesem Thema findest du unter https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview

Diese Software wird vorausgesetzt

Natürlich musst du vor der Entwicklung mit dem SharePoint-Framework Software installieren. Du benötigst die aktuellste (!) LTE-Version von NodeJS. Diese findest du unter https://nodejs.org/. Hast du bereits eine Version von NodeJS installiert, solltest du vor der Entwicklung überprüfen, ob es eine neuere Version gibt und diese ggf. installieren. Eine veraltete Version führt erfahrungsgemäß zu Problemen!

Des Weiteren benötigst du auch einen Code-Editor, wie beispielsweise Visual Studio Code, Atom oder WebStorm. In der folgenden kurzen Anleitung wird Visual Studio Code verwendet, da dieser viele Funktionen bietet, die wir bei der lise GmbH nutzen.

Sehr wichtig sind auch die Tools Yeoman und Gulp. Yeoman ist ein Generator bzw. Assistent zur Erstellung eines WebPart-Projekts über Konsole oder PowerShell. Wichtig ist hier die Installation des SharePoint-Generators. Gulp ist ein Build-System, welches unser TypeScript in JavaScript und unser SASS in CSS kompiliert. Diese Dateien werden anschließend durch Gulp gebündelt, minimiert und entsprechend der Konfiguration bereitgestellt.

Installiert werden diese Module über folgende NPM-Befehle:

 

npm install -g yo gulp

npm install -g @microsoft/generator-sharepoint

 

So entwickelst du ein WebPart mit SPFx!

Beispiel-Projekt: WebPart „Geburtstage“ ohne spezielles JS-Framework für SharePoint Online

Erstellt wird das Projekt komplett über Konsole oder Powershell. Zuerst legen wir im gewünschten Verzeichnis einen Projektordner an und wechseln anschließend in diesen. Nun starten wir den Generator-Assistent mit dem Befehl

 

yo @microsoft/sharepoint

 

Hier wirst du bequem durch die Erstellung des WebPart-Projekts geleitet. Für unser Beispiel-Projekt verwenden wir folgende Optionen:

Nun werden automatisch alle erforderlichen Dateien, Verzeichnisse und Abhängigkeiten erstellt.

Ist der Assistent fertig, müssen wir noch mit dem Befehl

 

   gulp trust-dev-cert

 

einmalig ein Entwicklerzertifikat für unser WebPart erstellen, da wir sonst eine Fehlermeldung im Browser bekommen. Geben wir nun den Befehl

 

   gulp serve

 

ein, so öffnet sich ein neuer Tab im Browser und wir können über das Plus-Icon unser WebPart zur Seite hinzufügen. Über das Stift-Icon gelangen wir, wie gewohnt, zu den Eigenschaften des WebParts. Geben wir nun in der Konsole oder Powershell den Befehl

 

   code .

 

ein, öffnet sich Visual Studio Code im richtigen Verzeichnis. Nun können wir die Dateien anschauen und bearbeiten.

Diese Dateien sind wichtig!

Die essentielle Datei ist die automatisch generierte TypeScript-Datei, in unserem Fall BirthdayWebPartWebPart.ts. Sie enthält die WebPart-Klasse mit allen erforderlichen Funktionen. Das wohl wichtigste Feature ist die render-Methode. Diese wird zur Laufzeit immer aufgerufen, wenn das WebPart geladen bzw. sich etwas darin geändert hat. Sie rendert also das HTML-Snippet des WebParts.

Ebenfalls zu beachten ist das SCSS-Modul, in unserem Fall BirthdayWebPartWebPart.module.scss. Hierin werden alle Styles, die später zu CSS kompiliert werden, definiert. Auch wichtig: die launch.json. Sie enthält die Informationen zum lokalen und gehosteten SharePoint.

Lesen und Anzeigen einer SharePoint-Liste über API-Request

Sofern noch keine passende Liste für Geburtstage im SharePoint besteht, legen wir eine an und füllen diese mit ein paar Daten.

Zunächst ist es ratsam, eine konfigurierbare Eigenschaft für die Liste zu erstellen, damit wir nicht an eine feste Liste gebunden sind. Du kanns dich hierbei einfach an der bestehenden Eigenschaft „description“ orientieren.

Hierfür erweitern wir zuerst das Interface IBirthdayWebPartWebPartProps in unserem TypeScript um die neue Eigenschaft. Das gleiche machen wir in der Funktion getPropertyPaneConfiguration. Anschließend definieren wir den Listennamen noch in der mystrings.d.ts und weisen ihm in der BirthdayWebPartWebPart.manifest.json noch einen default-Wert zu.

Als nächstes definieren wir ein Interface für einen Geburtstag mit den entsprechenden Attributen sowie ein Interface mit einem Array aus diesen Geburtstagen. Diese werden in einem späteren Schritt zum Mappen der Daten aus der Liste genutzt.

Im nächsten Schritt möchten wir die Daten über einen API-Request aus der angegebenen Liste lesen und diese anzeigen. Hierfür verwenden wir SPHttpClient und SPHttpClientResponse. Mit der Codezeile

importieren wir diese beiden Klassen. Nun können wir uns die Daten der Liste über einen API-Request holen und verarbeiten. Die entsprechenden Funktionen sehen dann wie folgt aus:

Nun müssen wir die Funktionen nur noch entsprechend in der render-Methode aufrufen. Diese sieht dann wie folgt aus:


Speichern wir die Dateien nun, wird das Projekt, sofern „gulp serve“ nicht beendet wurde, neu kompiliert und die Änderungen direkt im Browser angezeigt. Unser WebPart ist nun fertig.


Mehr Informationen zum Thema WebParts findest du unter https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Fazit

Das SPFx bietet eine attraktive Möglichkeit schnell und einfach ein performantes WebPart zu erstellen. Im Gegensatz zur konventionellen WebPart-Entwicklung in C# kannst du durch das SharePoint-Framework viel Zeit und Arbeit sparen. Das langwierige Deploying entfällt und das Testen des WebParts geht leicht von der Hand.

Auch das Debugging ist um einiges einfacher, da du direkt im Browser debuggen kannst und nicht zusätzlich noch den Debugger der IDE, wie zum Beispiel Visual Studio, an den entsprechenden Prozess attachen musst. Entwickler haben einfach mehr Kontrolle über das Verhalten des WebParts.

Leider ist die Dokumentation und Hilfe in der Community zu TypeScript und dem SharePoint-Framework noch recht bescheiden. Angesichts der Praktikabilität sollte sich dies in den kommenden Monaten ändern.

Wir können das SharePoint-Framework nur empfehlen. Es macht Spaß, damit ein WebPart zu entwickeln!

Newsletter-Anmeldung

Newsletter-Anmeldung
* Dieses Formular speichert Ihre E-Mail-Adresse. Weitere Informationen in unseren Datenschutzbestimmungen.