AngularJS – SharePoint Hosted Add-in entwickeln

Voraussetzungen

Die folgenden Voraussetzungen müssen vorhanden sein, um ein SharePoint Hosted Add-in mit AngularJS 2 entwickeln zu können:

  • O365 oder SharePoint 2013-Umgebung
  • Visual Studio mit Office Developer Tools
  • Visual Studio Code, Nodepad++ oder ein vergleichbarer Codeeditor
  • Git: https://git-scm.com/downloads
  • Nodejs: https://nodejs.org/
  • Webpack & Typescript: Installation mittels des CMD-Befehls
    npm install -g webpack webpack-dev-server typescript

Add-in-Projekt anlegen und bereinigen

Als erstes gilt es, ein neues Projekt vom Typ „SharePoint Add-in” anzulegen, wie es in der folgenden Abbildung dargestellt wird. Im nachfolgenden Dialog ist darauf zu achten, dass der Typ „SharePoint Hosted” ausgewählt wird, da die Applikation vollständig auf clientseitige Technologien aufbauen wird.

Da die Solution vieles mitbringt, was wir in der Entwicklung mit AngularJS2 nicht benötigen, entfernen wir alle nicht benötigten Komponenten, sodass lediglich die folgenden übrigbleiben

Ebenso gilt es, das jQuery nuget-Paket zu deinstallieren. Dies kann über einen Rechtsklick auf das Projekt und „Manage NuGet Packages” unter dem Reiter „Installed” durchgeführt werden.

Die App beinhaltet nun ausschließlich ein AppIcon, eine Manifestdatei für die Festlegung der Metadaten der App sowie eine Default.aspx. Letztere bildet den Einstieg in die App und referenziert zugleich sämtliche Komponenten der App.

Einrichtung der AngularJS 2 Struktur

Nachdem das Visual-Studio-Projekt bereinigt worden ist, navigiert man in der CMD-Konsole zum Projektordner, um dort AngularJS 2 zu installieren.

Dazu beziehen wir das sogenannte Angular Seed, welches neben der Installation von AngularJS 2 eine fertige Projektstruktur vorgibt. Dafür muss der folgende Befehl in die CMD-Konsole eingegeben werden:

git clone https://github.com/angular/angular2-seed.git

Anschließend führen wir die Installation mittels des Befehls „npm install” aus.

Nun können wir den ersten Build durch den Befehl „webpack” erstellen, wodurch ein Ordner namens „dist” erzeugt wird. Dieser enthält die App, welche nun mit dem SharePoint verbunden werden muss.

Zurück in Visual Studio können wir mittels „Show All Files” alle Dateien einblenden lassen, um so den genannten Ordner zur Projektstruktur hinzuzufügen.

Nun gilt es die Default.aspx so anzupassen, dass diese den Inhalt der „dist/index.html” korrekt aufruft. Dadurch wird zunächst der Header-Bereich reduziert, indem sämtliche vordefinierten Verweise aus dem ContentPlaceHolder „PlaceHolderAdditionalPageHead” entfernt werden, sodass lediglich „sp.js” referenziert und der Inhalt auf „full” gestreckt wird:

Anschließend muss der Body-Bereich der „dist/index.html” in den ContentPlaceHolder „PlaceHolderMain” übertragen werden, wobei die Referenzen zu den JavaScript-Dateien relativ zur Default.aspx anzugeben sind:

Leider ist AngularJS 2 in der aktuellen Version nicht mit SharePoint kompatibel, da ein Konflikt mit der in AngularJs benötigten Zone-Funktionalität besteht: https://github.com/angular/zone.js/issues/434
Um dies zu umgehen, müssen wir mittels „window.Zone = undefined;” (s.o.) die globale Zone-Funktionalität von SharePoint entfernen. Dies stellt allerdings keine zufriedenstellende Lösung dar, da dadurch die genannte SharePoint-Funktionalität für die Default.aspx nicht mehr zur Verfügung steht.

Ab diesem Punkt nutzen wir Visual Studio lediglich für das Deployment gegen SharePoint. Die Entwicklung findet im Codeeditor der Wahl statt, wobei auch Visual Studio genutzt werden kann.

Umgang mit dem AngularJS 2 Seed

Das AngularJS 2 Seed ist so aufgebaut, dass es beispielhafte Komponenten und ein einfaches Routing implementiert, sodass aufbauend darauf die Projektstruktur leicht erweitert werden kann.

Ferner kann das Projekt losgelöst von einem Webserver (auch SharePoint) entwickelt werden, indem auf einen lokalen Node.js-Webserver zurückgegriffen wird. Bei Verwendung dieser Möglichkeit ist darauf zu achten, dass eine Datenschicht abstrahiert werden sollte, sodass die App auch ohne SharePoint verwendet werden kann.

Befehle:

  • „npm start” – Starten des Projektes auf einem lokalen Node.js-Webserver
  • „webpack” – Builden von Änderungen innerhalb des „src”-Ordners
  • „webpack –watch” – Builden von Änderungen innerhalb des „src”-Ordners, sobald Änderungen an Dateien innerhalb von „src” vorgenommen wurden

Der Befehl „webpack –watch” empfiehlt sich insbesonders, da dieser dafür sorgt, dass Änderungen an Dateien innerhalb des „src”-Ordners automatisch im Hintergrund überwacht werden und das Projekt automatisiert nach „dist” gebuilded wird. Dadurch ist ein komfortables Arbeiten innerhalb von Visual Studio möglich, ohne dass die Entwicklungsumgebung verlassen werden muss.

Erfahren Sie mehr

novaCapta auf der Fachtagung für Interne Revision
Event
Event

novaCapta auf der Fachtagung für Interne Revision

Das Expertenteam der novaCapta präsentiert am 15. und 16. November ihre innovative Audit Management Lösung auf dem DIIR-Kongress in Dresden. Besuchen Sie unsere...

Valo ist neuer Partner der novaCapta für Intranets
News
News

Valo ist neuer Partner der novaCapta für Intranets

Durch die Partnerschaft mit Valo, dem Ready-2-Go Intranet-Baukasten aus Finnland baut die novaCapta ihr Angebot bei der Umsetzung von schnellen und funktionalen...

Jan
25
Webcast mit Microsoft: Fit für die digitale Arbeitswelt
Webinar
Webinar

Webcast mit Microsoft: Fit für die digitale Arbeitswelt

Die digitale Transformation und die Veränderung der Arbeitswelt ist längst in vielen Unternehmen und in den öffentlichen Einrichtungen angekommen. Dennoch stell...

SharePoint Framework Client-Side Webparts mit React
Blog
Blog

SharePoint Framework Client-Side Webparts mit React

React ist ein Framework zur Erstellen von Benutzeroberflächen. In der SharePoint Online Entwicklung bietet es sich für die Entwicklung von Client-Side Webparts...

Office 365 Groups als Evolution von SharePoint?
Blog
Blog

Office 365 Groups als Evolution von SharePoint?

Zusätzlich zu SharePoint erlauben die Office 365 Groups es mir als Anwender, schnell und einfach neue Gruppen anzulegen und selbständig Benutzer hinzuzufügen.

Sliding to heaven – A short story of a SPFx Slider Webpart
Blog
Blog

Sliding to heaven – A short story of a SPFx Slider Webpart

SharePoint Framework, kurz SPFx, ist eine zukunftsträchtige Technologie zur Erstellung von Webparts oder Extensions auf der Basis von TypeScript.

Junge mit rotem Herz aus Filz in der Hand als Symbol der Nächstenliebe
Referenz: Caritasverband Köln

Referenz: Caritasverband Köln

Dem hohen Anspruch an das Qualitätsmanagement wurde nun mit einer neuen SharePoint 2013 basierten Lösung der novaCapta Rechnung getragen.

Jan
17
Webinar Azure DevOps und Docker Machine
Webinar
Webinar

Webinar Azure DevOps und Docker Machine

DevOps ist in aller Munde, doch was genau verbirgt sich eigentlich hinter dem so viel beschworenen Konzept der IT-Zusammenarbeit? Im Webinar am 17.01.2019 erfah...

SharePoint Fachapplikationen

SharePoint Fachapplikationen

Fachapplikationen für Microsoft SharePoint erweitern den Funktionsumfang von SharePoint in vielfältiger Weise, lassen sich auf individuelle Bedürfnisse zuschnei...

Strukturen lernen und leben – Praxis Informationsarchitektur
Blog
Blog

Strukturen lernen und leben – Praxis Informationsarchitektur

Teil 1 – Strukturen lernen – Informationsarchitektur erfolgreich vertreten

End of Life – Eine Applikation wird abgelöst
Blog
Blog

End of Life – Eine Applikation wird abgelöst

Die Stilllegung einer Applikation im Application Lifecycle Management nicht beachtet. Dennoch sollten sie in einem ganzheitlichen Ansatz beachtet werden.

Die Micro-Info-Architektur
Blog
Blog

Die Micro-Info-Architektur

Vertiefung zum Thema Informationsarchitektur moderner Intranets mit SharePoint: Das Micro-Management.