WebParts mit dem Client Side Framework in Office 365 erstellen

Der Beitrag hilft dabei ein erstes WebPart mit dem SharePoint Client Side Frameork SPF(x) in Office 365 für das modern UI in Teamsites oder Communication Sites zu erstellen und zu veröffentlichen.

Im Netz gibt es dafür einige Anleitungen. Dies ist eine Zusammenfassung aus mehreren Seiten.

1. Entwicklungsumgebung einrichten
2. WebPart entwickeln
3. O365 Tenant für das Deployment einrichten
4. CDN – WebPart in Office 365 einstellen

Entwicklungsumgebung einrichten

• Node.js laden und installieren (enthält  NPM)
• Visual Studio Code laden

Nach dem Herunterladen und der Installation von Node.js (siehe Links oben), inklusive NPM, kann getestet werden, ob beides funktioniert.

 

Jetzt muss die Komandozeile (Console) von Windows geöffnet werden. Mit der Tastenkombination: Windows + R  öffnet sich ein Eingabefenster. In dieses kann „cmd.exe“ eingetragen werden. Die Console sollte sich öffnen.

Mit dem nachfolgenden Code wird die Installation von Node.js und NPM überprüft. Beide Befehle sollten die aktuell installierte Version ausgeben.

Aktualisierungen:

Node.js lässt sich für Windows aktuell (Stand 09.02.2018) nur über den Download der MSI aktualisieren (neu installieren)

NPM sollte immer in der aktuellsten Version ausgeführt werden – ein Update erhält man über den Befehl:

Installation von Yeomann und Gulp

Als nächstes installiert man Yeomann und Gulp.

Yeomann dient als Generator für neue SPFx WebParts.

Gulp wird für die Build-Autoamtion eingesetzt und beschleunigt das Zusammenführen von Ressourcen.

Es folgt  ein Yeoman Plug-in, welches als SharePoint WebPart Generator dient.

Als Entwicklungsumgebung kann nun noch Visual Studio Code installiert werden.

Die Vorarbeit ist jetzt getan. Jetzt wird entwickelt!

SPF(x) WebPart erstellen

Als Erstes muss über die Console in das gewollte Entwicklungsverzeichnis navigiert werden.

Dies ist bspw.  „c:\Entwicklung\clientsideframework“

Zusätzlich sollte ein Projekt/WebPart als Verzeichnis angelegt und in dieses gewechselt werden.

Mit Yeoman lässt sich jetzt eine WebPart-Instanz aus dem SharePoint Template erstellen.

• What is your solution name?  start-webpart (Enter)
• Where do you want to place the files? – Use the current folder
• Tenant deploy all sites? yes or no (like you want)
• Type of Component? WebPart
• WebPart name? gofaster
• Description? (Enter)
• JavaScript Framework?  no js framework

Jetzt wird die neue WebPart Instanz erstellt. Mit Visual Studio Code lässt sich der Code bearbeiten.

Alle wichtigen Dateien, für die ersten Schritte, liegen im Ordner „src/webparts/WEBPART-NAME“.

Es sollte als erstes die Datei WEBPART-NAME.ts geöffnet werden.

Wir ändern für Testzwecke den Text „Welcome to SharePoint!“ in „Erstes WebPart mit modern Style“ und speichern die Datei.

In der Console wird jetzt „gulp“ genutzt, um das WebPart zu testen.

Mit dem „serve“ Zusatz wird die Workbench geladen und das WebPart kann in verschiednen  Workbenches genutz werden.

Nach dem Ausführen sollte sich ein Browserfenster mit der Workbench öffnen.

Die App kann hinzugefügt werden.

Office365 Tenant für das Deployment einrichten

Für einen Testlauf ist das Einrichten und Hochladen der App (später beschrieben) nicht immer notwendig. Es kann das WebPart auch erstmal über die Office 365 Workbench gestestet werden.

Dazu wirOffice 365 Tenant mit folgender Url geöffnet.

https://YOURSITE_TENANT.sharepoint.com/sites/YOURSITE_COLLECTION/_layouts/15/workbench.aspx

Falls Sie Ihr Webpart jetzt ausrollen wollen, fahren Sie mit den nächsten Schritten fort.

Die erstellte Datei liegt im Solution Ordner „start-webpart\sharepoint\solution\start-webpart.sppkg“ und muss nun in den SharePoint App-Catalog ihres Tenant hochgeladen werden.

Wenn dies getan ist, kann die App zu jeder SiteCollection hinzugefügt werden (App hinzufügen).

Aktuell ist das WebPart aber noch auf die „lokalen Ressourcen“ gemappt und daraus ergibt sich folgender Fehler:

[SPLoaderError.loadComponentError]: Fehler beim Laden von Komponente „615de1bc-17bd-4a0c-ab00-016c2bc52f29“ (GofasterWebPart). Ursprünglicher Fehler: Fehler beim Laden der URL „https://localhost:4321/lib/webparts/gofaster/loc/en-us.js“ für die Ressource „gofasterStrings“ in Komponente

Der Fehler lässt sich beheben, indem lokal der „Gulp“ wieder angeworfen wird.

Damit der Fehler nicht dauerhaft auftaucht, weil irgendwelche Ressourcen fehlen, muss der Code in einen Content Delivery Network (CDN) abgelegt werden. Azure bietet sich hier an.

CDN – WebPart in Office 365 bereitstellen

Alternativ (damit diese Demo auch ohne Mehrkosten funktioniert) nutze ich als CDN eine SharePoint-Bibliothek.

Eine gute Anleitung an der ich mich orientiert habe, gibt es im Dev-Center und für Azure CDN ebenfalls dort

Ihr erstellt als Erstes in einer SiteCollection eine Dokumentbibliothek mit dem Titel CDN.

In dieser Bibliothek werden nun der Solution und WebPart-Ordner angelegt.

Bei mir ergibt sich folgende URL: https://YOURTENANT.sharepoint.com/sites/dev_1de/cdn/start-webpart/gofaster.

Ihr müsst diesen Pfad jetzt im Projekt (WebPart) verankern. Dazu wird im Visual Code die Datei „/config/write-manifests.json“ und der Wert „cdnBasePath“ angepasst.

Um die entsprechenden Daten für den Upload zu erhalten, müssen die Pakete und Dateien erzeugt werden.

Wie zuvor, wird die Solution in den App Katalog geladen.

Alles was im Ordner „temp\deploy“ liegt, muss in den benannten CDN Ordner im SharePoint.

Sobald alle Dateien hochgeladen sind, lädt die App/WebPart auch ohne lokalen Gulp.

Viel Spass beim Erstellen neuer Webparts.

Von Folgen demnächst noch Beispiele für die Nutzung von Reach.js und das Arbeiten mit der Suche und Listen.