© best_vector/Shutterstock.com
SharePoint Kompendium
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.

Nils Andresen


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-sharepointDie 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/sharepointDa 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 serveVerzeichnisstruktur und Aufbau der LösungDer 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, "deploy/": true, "node_modules/": true}Die in der Lösung vorhandenen Verzeichnisse haben die folgende Bedeutung: Im Verzeichnis config finden sich alle Konfigurationen der Lösung, z. B. der Ausgabepfad der Bundle-Datei oder welche externen Bibliotheken eingebunden werden sollen. Im Verzeichnis typings finden sich alle externen TypeScript-Typings und im Verzeichnis src schließlich die Quellen des neu erstellten Web Parts. Die (aktuell ausgeblendeten) Verzeichnisse temp, lib, dist und deploy enthalten u. a. die generierten Dateien für die spätere Auslieferung (Abb. 3). Das Verzeichnis node_modules entsteht durch die Verwendung von npm und beinhaltet alle node-Module.Im Verzeichnis src/webparts/addSomeCode befinden sich die Quellen, die für das ers...

SharePoint Kompendium
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.

Nils Andresen


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-sharepointDie 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/sharepointDa 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 serveVerzeichnisstruktur und Aufbau der LösungDer 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, "deploy/": true, "node_modules/": true}Die in der Lösung vorhandenen Verzeichnisse haben die folgende Bedeutung: Im Verzeichnis config finden sich alle Konfigurationen der Lösung, z. B. der Ausgabepfad der Bundle-Datei oder welche externen Bibliotheken eingebunden werden sollen. Im Verzeichnis typings finden sich alle externen TypeScript-Typings und im Verzeichnis src schließlich die Quellen des neu erstellten Web Parts. Die (aktuell ausgeblendeten) Verzeichnisse temp, lib, dist und deploy enthalten u. a. die generierten Dateien für die spätere Auslieferung (Abb. 3). Das Verzeichnis node_modules entsteht durch die Verwendung von npm und beinhaltet alle node-Module.Im Verzeichnis src/webparts/addSomeCode befinden sich die Quellen, die für das ers...

Neugierig geworden?


   
Loading...

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