SharePoint Add-In zur Terminfindung mit AngularJS

„DO4APPointments“ ist eine kleine und praktische Anwendung für SharePoint aus dem Hause Data One. Neben der Funktionsübersicht soll ein kleiner Einblick in die technische Umsetzung zeigen, welche Möglichkeiten sich durch den Einsatz von SharePoint-Add-Ins ergeben.

---

Es handelt sich hierbei um ein SharePoint Hosted Add-In (ehemals bekannt als „App“). Dieses kann bekannterweise sowohl auf Office 365 sowie seit SharePoint 2013 auch auf On-Premise-Umgebungen genutzt werden.

Das Projekt wurde bereits vor 2 Jahren zu Test-Zwecken entwickelt. Wir veröffentlichen es im Rahmen der Initiative „Open Source by Data One“. Es steht unter der MIT-Lizenz und darf somit von jedem wiederverwendet werden.

Zum Quellcode

Zweck der Anwendung

Grob gesagt ermöglicht das Add-In den Usern Events mit mehreren möglichen Zeiträumen zu erstellen. Die Events können dann mit anderen SharePoint Benutzern geteilt werden. Diese können anschließend ihren bevorzugten Termin auswählen. Der Terminvorschlag mit den meisten Stimmen wird dabei hervorgehoben.
Die Benutzer erhalten einen Überblick über Events, die sie selbst erstellt oder für die sie gestimmt haben. Dabei haben sie auch die Möglichkeit, nach einem bestimmten Event zu suchen.

In der Dokumentation unserer Quellcode Verwaltung finden Sie eine detaillierte Anleitung zur Funktion des Add-Ins.

Blick unter die Haube

Die Installation geht einfach von der Hand. Dabei ist die Voraussetzung, dass der App Catalog Ihrer SharePoint Farm bereits ordentlich konfiguriert ist. Dies ist meistens die größte Hürde bei der Sache : )

Ausführliche Unterstützung dazu erhalten Sie z.B. hier.

SharePoint Artefakte

Das Add-In benötigt 3 Listen:

• Events
• Terminvorschläge
• Abstimmungselemente

Die dazu benötigte Struktur (also die SharePoint Felder, Inhaltstypen sowie Listen-Definitionen) wird automatisiert per Feature und XML-Definitionen ausgerollt.

Inzwischen verwenden wir bei Data One diese Vorgehensweise nicht mehr, da sie zu viele Nachteile mit sich bringt. Wir rollen nun sämtliche Artefakte über das PnP-Framework aus. Dieses generiert die Artefakte mithilfe des Client-Object-Models per PowerShell. (Dazu könnte es demnächst vielleicht einen eigenen Blog Post geben)

Standard SharePoint Listenansichten

Das Add-In verwendet eine komplett eigene Benutzeroberfläche. Sie beinhaltet daher keine Standard SharePoint Listenansichten. Wer sich trotzdem die „Roh-Daten“ anschauen möchte, kann dies durch Manipulation der URL tun:
In der Adresse einfach das „Pages/Default.aspx“ durch z.B. „Lists/Events“ ersetzen.

Benutzeroberfläche mit AngularJS

Wie bereits erwähnt verwenden wir für die Gestaltung der Oberfläche AngularJS und Bootstrap.

Die Anwendung selbst besteht quasi nur aus einer Seite (Default.aspx).
Die einzelnen Module werden durch die Anwendung ein- und ausgeblendet. Das ViewModel besteht aus mehreren Controllern. Diese beschaffen die Daten und stellen hilfreiche Funktionen für die Oberfläche bereit.

Hier einige Highlights, die sich durch die Verwendung von AngularJS ergeben:

Filterung von Events

Das ViewModel liefert Events als Liste von JSON-Objekten. Diese werden durch ein ng-repeat dargestellt. Hier gibt es nun die Möglichkeit, einen Filter zu definieren. Dieser wird per ng-model an ein Input-Feld gebunden.

[code lang=“markup“]

<input type="text" ng-model="search" placeholder="Please type..." />
<table ng-controller="EventsCtrl" id="eventsListTable">
    <tr ng-repeat="event in events | filter:search">
    ...

[/code]

So lässt sich auf einfachste Weise eine Suche implementieren:

Hervorheben des Zeitraums mit den meisten Stimmen

Das ViewModel liefert eine Liste von Zeiträumen („dataProposals„). Die Methode highlightDate im Controller entscheidet, ob der aktuelle Terminvorschlag derjenige mit den meisten Stimmen ist. Sie gibt dann wahlweise true oder false zurück. Über das Attribut ng-class wird dann je nach Ergebnis die CSS-Klasse „info“ zugewiesen. Diese hebt die Zeile dann farblich hervor.

[code lang=“markup“]

<tr ng-repeat="dateProposal in dateProposals | orderBy:['Date', 'StartDate']"
    ng-class="{'info': highlightDate(dateProposal)}">
    ...

[/code]

Nebenbei lassen sich die Elemente auch direkt vorsortieren. Das Signal-Wort orderby gefolgt vom Namen der Eigenschaft aus dem JSON Objekt ergibt eine schnelle und einfache Sortierung.

Validierung von Zeit und Datum

Die Validierung von Zeit und Datum kann einem Entwickler so manches graues Haar bereiten. Durch Verwendung von AngularJS kann man im Attribut ng-pattern einen regulären Ausdruck hinterlegen. Es werden dann ausschließlich solche Eingaben zugelassen, die dieser Vorgabe entsprechen:

[code lang=“markup“]

<input type='text' class="form-control" ng-model="dateProposal.date"
    required placeholder="DD-MM-YYYY" ng-pattern="/^(0[1-9]|[10-31]))-(0[1-9]|1[012])-(19|20)dd$/" />
<input type='text' class="form-control" ng-model="dateProposal.startTime"
    required placeholder="hh:mm" ng-pattern="/^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/"/>

[/code]

Die beiden Eingabefelder erfordern durch das Attribut requried unbedingt eine Eingabe. Ein Platzhalter gibt dabei das gewünschte Format vor. Dieses wird durch den regulären Ausdruck überprüft.

Quellcode

Das aktuelle Release und den Quellcode finden Sie unter:
GitHub.com/DataOne/DO4APPointments