© best_vector/Shutterstock.com
Ein SPFx Web Part für die Anzeige von Code

Einführung in SharePoint Framework


Der folgende Artikel zeigt, wie sich ein einfaches Client-side Web Part oder SPFx Web Part mit SharePoint Framework [1] erstellen lässt. Da es im aktuellen SharePoint Online nicht möglich ist, Codebeispiele in eine „Modern Page“ einzufügen, wird als Beispiel die Erstellung eines einfachen Web Parts für die Darstellung von formatiertem Code gewählt.

Wer sein erstes SPFx Web Part schreibt, sollte vorher einen Blick in den Artikel zur Einrichtung der Umgebung werfen [2]. Die benötigten Elemente sind die folgenden: ein aktuelles npm [3], Yeoman [4], gulp [5] und der SharePoint-Generator für Yeoman [6]. Wenn schon eine Version von npm installiert ist, reicht folgendes Statement aus, um die notwendigen Elemente auf dem System global zu installieren.

> npm install -g npm yo gulp @microsoft/generator-sharepoint

Scaffolding

Die Erstellung eines Web Parts beginnt mit der Generierung eines Gerüsts (Scaffolding). Grundlage dafür sind Yeoman und der SharePoint-Generator für Yeoman. Dieser Code zeigt die notwendigen Schritte zum Erstellen eines Verzeichnisses und zum Starten der Generierung:

> mkdir spfx-code-show
> cd spfx-code-show
> yo @microsoft/sharepoint

Der SharePoint-Generator wird zum Start fünf Punkte abfragen: Name der Lösung, Ablage der Dateien, verwendetes JavaScript-Framework, Name des Web Parts und eine Beschreibung. Die verwendeten Antworten zeigt Abbildung 1.

image

Abb. 1: Start der Generierung mittels Yeoman und SharePoint-Generator

Da bei der lokalen Entwicklung mit SharePoint Framework keine „echten“ SSL-Zertifikate zum Einsatz kommen, sollte man den Entwicklerzertifikaten etwas Vertrauen entgegenbringen. Der gulp-Task trust-dev-cert versucht ein Zertifikat entsprechend vertrauenswürdig zu hinterlegen, die nachfolgende Sicherheitsabfrage sollte dann mit „Ja“ beantwortet werden. Der generierte Code ist in sich schon lauffähig und kann mittels des gulp-task serve auch schon direkt gestartet werden. Der nachfolgende Code zeigt den Start und Abbildung 2 das Ergebnis.

> gulp trust-dev-cert
> gulp serve
image

Abb. 2: Das soeben neu erstellte Web Part „AddSomeCode“ wird in der SharePoint Workbench angezeigt

Verzeichnisstruktur und Aufbau der Lösung

Der Verzeichnisaufbau innerhalb der Lösung ist für „normale“ SharePoint-Entwickler etwas ungewohnt. Listing 1 zeigt den Ausschnitt einer settings.json, die für VSCode [7] die (vorerst) nicht benötigten Verzeichnisse ausblendet.

"files.exclude": {
"**/.*": true,
".vscode/": true,
"temp/": true,
"lib/": true,
"dist/": true,
"...

Exklusives Abo-Special

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang