Microsoft Teams SPFx

Mit Teams hat Microsoft angefangen, eine Applikation zur Zusammenarbeit unter Projektteams und Organisationen zu bieten. Bis jetzt wird Teams in erster Linie zur Kommunikation und Verwaltung von Daten genutzt, aber Microsoft pusht die Entwicklung immer weiter in die Richtung eines Universal-Tools. Immer mehr Applikationen werden aus der Weboberfläche entfernt und als Teams App eingefügt, wie z.B. Planner und Schichten. Die bisherige Entwicklung von Teams Applikation gestaltete sich zuvor wie die Entwicklung einer Webseite, welche dann einfach per Manifest in Teams eingebunden werden konnten. Aber mit der neuen Weiterentwicklung von SharePoint Framework (SPfx) wird es uns ermöglicht, nun auch Teams Applikationen in SharePoint zu hosten und zu verwalten.

Aber was bringt uns das eigentlich wirklich? Durch die Anbindung mit SPfx werden uns natürlich auch alle Vorteile des Frameworks geboten, sprich Einfach-Authentifizierung und Zugriff auf Listen sowie andere Daten innerhalb des Tenants. Außerdem wird die Applikation somit im SharePoint gehostet, was uns die Entwicklung eines Backends abnimmt. Also warum nicht einfach immer SharePoint Framework? Leider hat die Nutzung von SPfx noch seine Nachteile. Momentan bietet Microsoft noch keinen Support für diese Apps im Teams App Store. Man kann diese dementsprechend zwar im SharePoint Store anbieten, benötigt aber immer Eingreifen eines Admins. Will man also eine Applikation entwickeln, welche in Teams von einem Nutzer selbst ‚mal eben so‘ installiert werden kann, bietet sich SPfx leider nicht an. Individualsoftware für Organisationen wiederum kann hiermit jedoch hervorragend umgesetzt werden. In diesem Blogbeitrag soll aufgezeigt werden, wie simpel mit SharePoint Framework eine Teams Applikation erstellt werden kann. SPfx soll hierbei nicht extra erläutert werden.

Anlegen einer neuen Teams Applikation

Um eine neue Teams Applikation zu erstellen, kannst du wie zuvor auch einen SPfx Webpart mit dem SharePoint Framework anlegen. Hier der Link zum offiziellen Guide: https://docs.microsoft.com/de-de/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Wichtig zu beachten wiederum ist, dass das SharePoint Framework mindestens auf der Version 11.x sein muss, während NodeJS nicht höher als 10.x sein darf. Für eine bessere Versionsverwaltung mit NodeJS empfehle ich NVM, falls also an mehreren Projekten arbeitet wird und zwischen Versionen gewechselt werden muss, kann dies ganz einfach über dieses Tool verwaltet werden: https://github.com/coreybutler/nvm-windows

Nun aber zum interessanten Teil:  Wie wird aus dem SPfx Webpart eine Teams Applikation? In dem neu erstellten Webpart kann im [NameDerApp]WebPart.manifest.json die Eigenschaft „supportedHosts“ mit dem Attribut „TeamsPersonalApp“ erweitert werden.

Hier wird sogar die Möglichkeit geboten, einen Webpart in mehreren Hosts zu unterstützen. „TeamsPersonalApp“ (Abb. 2) bedeutet in diesem Fall, dass die App als eigenständige Applikation in Teams hinzugefügt werden kann. Andere Optionen wären z.B. „TeamsTab“ (Abb. 3). Dabei werden die Apps als Tab innerhalb eines Teams hinzugefügt. 

Applikationen, die hier hinzugefügt werden, sind Personal Apps
Applikationen, die hier hinzugefügt werden, sind Tab Apps
Applikationen, die hier hinzugefügt werden, sind Personal AppsApplikationen, die hier hinzugefügt werden, sind Tab Apps

Zum Testen der Applikation kann wie zuvor in SPfx „gulp serve“ ausgeführt werden. Leider wird hier weiterhin noch eine SharePoint-Seite simuliert und es gibt somit keine richtige Möglichkeit, die App lokal in einer Teams-Umgebung visuell zu testen. In funktionaler Hinsicht gibt es dennoch aus meiner Erfahrung keine Unterschiede. Wenn die App in der Workbench funktioniert, sollte dies auch in Teams kein Problem darstellen. Ein wichtiger Hinweis noch: Um die Workbench nutzen zu können, muss im Root Verzeichnis des Projektes der Befehlt „gulp trust-dev-cert“ ausgeführt werden, sollte das noch nicht passiert sein.

Upload der App in SharePoint

Bevor die App in den Tenant hochgeladen werden kann, muss noch in der config/package-solution.json folgende Eigenschaft hinzugefügt werden:

Dies ermöglicht das Tenant-weite Deployment der Applikation, um sie anschließend in Teams nutzen zu können. Nun muss die Applikation – wie bei jedem SPfx Webpart – erst einmal noch kompiliert werden mit den Befehlen:

Gulp bundle --ship

Gulp package-solution --ship

Dadurch entsteht eine .sppkg-Datei im SharePoint-Ordner des Projektes. Diese muss nun noch im App-Katalog des Tenants hochgeladen werden. Beim Hochladen ist zu beachten, dass ein Popup-Fenster erscheint, bei dem der Haken bei „Make this solution avalaible to all sites in the organization“ gesetzt werden muss. 

Sobald der Upload durch ist, kann die App ausgewählt, oben im Menu auf „FILES“ geklickt und danach auf den Button „Sync to Teams“ gedrückt werden.

Nun ist die App bereitgestellt fürTeams und kann im Teams Client oder in der Browser-Version hinzugefügt werden. Über das 3-Punkte-Menu und „Weitere Apps“ öffnet sich der Teams Store und unter „Entwickelt für [Name der Umgebung/Organisation]“ sollte nun die neue App auswählbar sein.

Interessante Tools zur Entwicklung

Mit den bisherigen Informationen sollte es grundsätzlich bereits möglich sein, mit SPfx die Teams App Entwicklung zu starten. Im Folgenden gibt es aber zusätzlich noch ein paar Tools, die die Entwicklung verbessern oder vereinfachen können.

PNP JS

Wenn es um Requests an SharePoint-Listen geht, ist PNP JS auch weiterhin meiner Meinung nach ungeschlagen. Es kann schnell und einfach eingebunden werden und vereinfacht unsere Requests sowie die Filterung und Verfeinerung.

https://pnp.github.io/pnpjs/getting-started/

Teams-Client-SDK

Diese SDK wird gebraucht, um sogenannte Deeplinks zu erstellen. Damit können Verlinkungen innerhalb Teams erstellt werden, z.B. auf spezielle Teams oder Tabs in anderen Teams Applikationen.

https://docs.microsoft.com/de-de/microsoftteams/platform/tabs/how-to/using-teams-client-sdk

Graph API

Diese API ist eine weitere Möglichkeit, verbesserte REST-Abfragen an den Tenant zu senden. Für Listen empfehle ich weiterhin PNPJS, aber Graph kann die ein oder andere Option mehr bieten. Außerdem könnte in Zukunft PNP JS hiermit abgelöst werden sollen.

https://docs.microsoft.com/de-de/sharepoint/dev/spfx/use-aad-tutorial