SPFx: Neue UI, neues SharePoint Framework, neue Entwicklertools!
avatar

Als ich vor fast zehn Jahren mein erstes Webpart mit dem MOSS 2007 geschrieben habe, war die SharePoint-Welt noch serverseitig geprägt. Diese Zeiten sind mittlerweile vorbei! Clientseitige SharePoint Entwicklung gewinnt seit ca.zwei Jahren extrem schnell an fahrt.

Um den Code der clientseitigen Lösung auf die Seite zu bekommen, konnte man entweder ein Script- oder Content Editor Webpart verwenden oder die Lösung als eine App umsetzen. Seit Anfang Januar ist mit SPfx (1.0) ein neues clientseitiges Framework für die Entwicklung von SharePoint-Lösungen erschienen. Dieses hat den Vorteil, dass anders als bei einer App direkt im DOM der Seite gearbeitet wird (ohne IFrame); ohne mit den zuvor genannten Webparts arbeiten zu müssen. Es unterstützt dabei alle gängigen Browser Frameworks wie bspw. React, knockout und Angular.

Microsoft hat seit einiger Zeit die neue Benutzeroberfläche für SharePoint veröffentlicht, die bei Bedarf aktiviert werden kann. In dieser können leider keine bzw. nur eingeschränkt eigenen Skripte auf der Seite eingebunden werden. Wer also mit der “New UI Experience” arbeiten möchte, sollte auf jeden Fall in SPFx reinschnuppern und über den Einsatz der neuen clientseitigen Webparts nachdenken.

Hier ein kurzer Einblick in das neue UI Design. Wurde das Webpart erfolgreich installiert, kann es über das Plus-Symbole in der Mitte in die Seite eingefügt werden.

image

Um die Entwicklung dieser Webparts noch komfortabler zu gestalten, muss nicht zwingend in der Cloud gearbeitet werden. Microsoft hat eine Option geschaffen diese Komponenten lokal zu entwickeln.

Schritte zur Vorbereitung der Entwicklungsumgebung.

Um die Entwicklungsumgebung vorzubereiten, sind einige Schritte erforderlich, die ich nachfolgend gelistete und erläutert habe.

Da bei der HanseVision ein Proxy verwendet wird, muss NPM mit den nachfolgenden Befehlen diesen konfiguriert werden.

$ npm config set proxy http://proxy.domain.tld:port
$ npm config set https-proxy http://proxy.domain.tld:port

  • Installation Yeoman: npm install -g yo
    Yeoman ist ein Generator, um u.a. Projektvorlagen anlegen zu lassen. Dabei werden komplette Verzeichnisstrukturen und die erforderlichen Dateien erstellt.
  • Installation Yeoman generator for the SharePoint Framework: npm i @microsoft/generator-sharepoint
    Dies ist die Erweiterung für Yeoman, damit der Scaffolder die neusten SharePoint Projektvorlagen kennt. (Eine super Anleitung für erste Schritte ist auch unter http://www.sharepointnutsandbolts.com/2016/06/develop-client-web-part-in-sharepoint-framework.html zu finden. )
  • Installation VS Code: https://code.visualstudio.com
    (Open Source Quelltext-Editor von Microsoft)
  • Installation gulp: npm install gulp -g und npm install -g gulp-cli
    Gulp ist ein Toolkit um Entwicklung-Tasks automatisiert auszuführen. Z.B. um TypeScript zu kompilieren und ein Bundle zu erstellen.

Nach der Installation trat bei mir der folgende Fehler auf :

‚gulp‘ is not recognized as an internal or external command, operable program or batch file.

Die Lösung: Eine User Variable anlegen (Siehe http://stackoverflow.com/questions/24027551/gulp-command-not-found-error-after-installing-gulp)

  • Installation gulp-serve: npm i –save-dev gulp-serve
    Diese Komponente ermöglicht volle HTTP Serverfunktionalität. Analog zu Visual Studio Cassini kann direkt zum Debuggen ein SharePoint Framework  Workbench geöffnet werden.

 

Wird nun im generierten Projektverzeichnis der Befehl “gulp serve” ausgeführt werden alle erforderlichen Entwicklungstasks ausgeführt und der Workbench gestartet. (Als würde man im Visual Studio F5 drücken.)

image

Am Ende der Verarbeitung öffnet sich der Standard-Browser. Das Ergebnis sieht wie folgt aus:

image

Jetzt kann man mit der Entwicklung starten und den eigenen TypeScript Code in der Webpartvorlage implementieren. In diesem Beispiel habe ich lediglich ein zusätzliches Feld für die Einstellungen und Anzeige hinzugefügt.

image

Die neue Art clientseitige Lösungen zu implementieren (Visual Code, NPM, Gulp, etc. ) fühlt sich anfangs etwas befremdlich an. Das ändert sich aber nach den erst Zeilen Code und macht dann richtig Spaß! Smile

Viel Spaß beim ausprobieren!

Schreibe einen Kommentar