ModernUI Intranet mit PnP SharePoint Starter Kit

PnP Starter Kit

Vermutlich hat sich schon jeder mit dem ModernUI von SharePoint beschäftigt. Es ist die konsequente Weiterentwicklung einer modernen Web Oberfläche. In diesem Artikel beschreibe ich die Installation des PnP Starter Kits.

Grundsätzlich kann man mithilfe der Communication Site bereits ein Intranet gestalten, das sehr ansprechend ist. Zudem sind die Seiten durchaus für Power User bedienbar – endlich. Allein das war die Grundlage für einen meiner Kunden, sein Intranet umzustellen. Zudem kommen in Zukunft noch weitere Webparts, die bei der Bearbeitung und Gestaltung von Seiten helfen.
Dennoch kommt man manchmal an den ein oder anderen Punkt, an dem es notwendig ist, sich über 3rd Party Produkte Gedanken zu machen, oder…

PnP Starter Kit

Zusätzlich gibt es die PnP Initiative, ein Community Projekt. Diese baut auf dem ModernUI auf und liefert grundsätzlich mal Beispiele. Diese können aber auch direkt oder mit kleinen Anpassungen weiterverwendet werden. Möglicherweise dient es auch für 3rd Party Hersteller als Guideline oder Basis um eigene Dienste darauf aufzubauen. Eines darf man bei Community Projekten nie vergessen – Support. Bei 3rd Party Herstellern hat man typischerweise einen schnelleren Support.

Derzeit funktioniert dies gut mit einem Office 365 Tenant.

Installation

Damit man das PnP Starter Kit verwenden kann, muss man zunächst ein paar zusätzliche Komponenten installieren. Ein Entwickler wird dies vermutlich schon installiert haben, jemand der mehr aus der Admin Ecke kommt vermutlich nicht. Daher einmal zusammen gefasst.

Installation Node.JS

Als erstes muss man Node JS installieren: https://nodejs.org/en/download/

Gulp

Auf der Kommandozeile bitte den Zweizeiler ausführen, zur Installation von Gulp und die zweite Zeile aktualisiert NPM (Node Package Manager):

gulp
Installation von gulp aus der Kommandozeile.

SharePoint PnP PowerShell

Es wird ebenfalls die aktuellste Version der PnP SharePoint Online PowerShell benötigt. Dies kann wie folgt installiert werden:

Office365-Connect

Wir müssen uns auf Office 365 anmelden, natürlich kann man das für jeden Dienst einzeln tun, grundsätzlich kann ich aber folgendes PowerShell Modul empfehlen: https://github.com/martensnico/Office365.Connect

Des meldet mich auf den ausgewählten Diensten an, deren Anmeldung ja je nach Dienst unterschiedlich sind.

Natürlich sollte der Account, Tenant Admin sein, und auch zzgl. als Term Store Administrator eingetragen sein.

Tenant Konfiguration

Anpassung der Konfiguration des User Profile Service, dies wird später für den benutzerdefinierten Footer verwendet. Hier muss ein entsprechendes Property im „PnP-CollabFooter-MyLinksangelegt“ werden, das ist aber auch ausführlich hier beschrieben: https://github.com/SharePoint/sp-starter-kit/blob/master/documentation/tenant-settings.md

API Key für aktien kurs webpart (optional)

Für die Verwendung des Aktienkurs Webparts, muss ein API Key von Alpha Vantage generiert werden. Grundsätzlich kann man aber auch erstmal ohne starten, das Webpart wird dann einfach übersprungen.

Die Details sind ebenfalls hier beschrieben: https://github.com/SharePoint/sp-starter-kit/blob/master/documentation/tenant-settings.md

PnP Starter Kit

Das Starter Kit ist auf GitHub veröffentlicht, da gibt es die entsprechende Dokumentation und man kann per Download alle Quellen herunterladen:

Nachdem man das Repository heruntergeladen hat, bitte in den Eigenschaften der ZIP Datei immer sicherstellen, vorher auf „Unblock“ zu klicken – falls es angezeigt wird. Anschließend entpacken.

Anschließend die Datei package\sharepoint-starter-kit.sppkg in den App Catalog hochladen (typischerweise /sites/appcatalog/) und autorisieren.

So nun kommt die Magie, per Skript wird der Build Prozess angestoßen und die Site Collections erstellt.

Das Skript erstellt immer eine Beispielstruktur mit neuen Site Collections. Nach dem Deployment stehen aber alle Webparts auch auf anderen Site Collections zur Verfügung.

Hier ein paar Screenshots vom eigentlichen Build Prozess:

PnP Starter Kit - deploy
Zeigt die Verzeichnisstruktur und startet den Build Prozess.
PnP Starter Kit - deploy 2
Als erstes werden die Site Collections erzeugt. Die npm Warnung ist weg, wenn man wie im Artikel beschreiben die aktuellste Version verwendet.
PnP Starter Kit - deploy 3
Build Prozess
PnP Starter Kit - deploy 4
Upload der Lösungen auf SharePoint

Fertig, anschließend sollte das Ergebnis beim Öffnen der Site /sites/testportal (also Prefix + portal) so aussehen:

PnP Starter Kit
Zeigt die Startseite des PnP Starter Kits

Zusammenfassung

Die PnP Initiative liefert bereits weiter gute Beispiele, wie man mehr aus der Communication Site machen kann, optimiert die Anzeige vom Hero Webpart und fügt viele nützliche Tools zusammen. Auch wird die globale Navigation über Hub-Websites erstellt.

Ich denke diese Basis zeigt was man bereits mit Boardmitteln machen kann und ist sicherlich für viele ausreichend.

Teilen

Autor: Dennis Hobmaier

Dennis Hobmaier ist Solution Designer bei Kapsch BusinessCom AG. Er hat über 15 Jahre Erfahrung in IT-Enterprise Umgebung aller Größenordnungen und bedient Kunden aus den unterschiedlichsten Branchen. Als MCSE SharePoint hat er tiefgreifende Kenntnisse in den Bereichen Microsoft Active Directory, Windows, SharePoint und Office 365. Gerne teilt er seine Projekterfahrung mit Ihnen.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verarbeitet werden .