Corona-Pandemie: Reisebeschränkungen darstellen
Excerpt
In this blogpost I present my web part Travel Restriction Map. This is an Office 365 web part for modern pages in SharePoint Online that companies can use to make travel notices and - most recently - travel restrictions for business travel easily accessible on the intranet.
Übersicht
Als sich die Corona-Krise Anfang des Jahres abgezeichnet hat, bekam ich von unserem Kunden den Auftrag, eine interaktive Weltkarte ins Intranet einzubinden. Damit sollten sich die ca. 45.000 Mitarbeiter des Unternehmens im Intranet, auf Basis von Microsoft SharePoint 2013 On-premise, über aktuelle Reisebeschränkungen für Geschäftsreisen in bestimmte Länder schnell und einfach informieren können. Ich habe in meinem "virtuellen Werkzeugkasten" gekramt und die Anforderung damals mit einer einfachen Image Map gelöst, die responsive eingebunden und durch eine Custom List gepflegt wird.
Für Unternehmen, deren Intranet auf Office 365 basiert, dürfte die Lösung mit Javascript und SP.js nicht mehr funktionieren, sofern die IT-Abteilung nicht das Script Editor Webpart (SEWP) aktiviert hat. Hier muss es also zukünftig eine andere Lösung geben. Ich habe mich daher für die Entwicklung eines Webparts für Office 365, genauer für Modern Pages in Office 365, entschieden.
Problemstellung
Reisebeschränkungen oder auch länderspezifische Reiseinformationen bei Geschäftsreisen gibt es vermutlich in jedem größeren Unternehmen. Solche Informationen beginnen bei Angaben über örtliche Ansprechpartner, reichen über Abrechnungsmodalitäten bei Spesenausgaben und enden ganz aktuell bei Vorschriften bzgl. der Corona-Pandemie. Wie macht man solche Daten den Mitarbeitern im Unternehmen am besten zugänglich? Üblicherweise legt man eine Liste der Länder an, für die Reisehinweise vorliegen. Neben einer langen Liste ist aber auch eine Karte als grafische Auswahlmöglichkeit denkbar. Der Mitarbeiter klickt in diesem Fall auf das Land, in das er reisen möchte.
Da in Office 365 die Möglichkeit mit JavaScript Snippets zu arbeiten vermutlich häufig nicht gegeben sein wird, war es mir wichtig, eine "Office 365 konforme" Lösung zu entwickeln. Außerdem wollte ich sicherstellen, dass die Lösung bei Modern Pages verwendet werden kann. Die Lösung musste daher responsive sein. Und zuletzt weiß ich aus meiner beruflichen Erfahrung, dass typische SharePoint Anwender nur geringe SharePoint Kenntnisse haben und nicht in der Lage sein werden, z.B. eine neue Custom List anzulegen. Die Lösung muss also bereits mit allem an Bord zur Verfügung gestellt werden.
Lösungsansatz
Microsoft sieht für die Entwicklung von SharePoint Online Lösungen das SharePoint Framework SPFx [1] vor. Damit lassen sich sowohl Erweiterungen (engl. Extensions), als auch klientseitige Webparts bauen. SPFx unterstützt unter anderem die JavaScript Bibliothek React [2]. Damit gelingt die Integration von React-Komponenten mittels Webpart relativ einfach.
Die Verwendung der Karte habe ich so geplant: der Mitarbeiter, der seine Geschäftsreise plant, öffnet im Intranet die Seite des Travel Managements. Dort findet er die interaktive Karte mit Reisebeschränkungen, siehe beispielsweise Abbildungen 1, 2 und 3. Je nach Anforderung des Unternehmens wird entweder eine Weltkarte oder eine beliebig andere Länderkarte angezeigt. Der Mitarbeiter klickt im Falle der Weltkarte zuerst auf den Kontinent, in dem sich das Land befindet, in das er reisen möchte. In Abbildung 4 sieht man, wie der Mitarbeiter in der Weltkarte die Auswahl des Kontinents Nord Amerika trifft. Danach wird die Länderkarte des angeklickten Kontinents geladen und angezeigt. Nun klickt der Mitarbeiter auf das Land, in das er reisen möchte. In Abbildung 5 trifft der Mitarbeiter die Auswahl USA als Zielland seiner Geschäftsreise.
Im Anschluß wird ein modaler Dialog angezeigt, dessen Inhalt (Titel und Beschreibung) aus einer zum Webpart gehörenden Custom List geladen wird. In Abbildung 6 wird eine fiktive Reisewarnung für das zuvor ausgewählte Zielland USA angezeigt. Die Beschreibung darf dabei Formatierungen und Hyperlinks enthalten. Die Pflege der Liste wird durch das Travel Management sichergestellt. Das Travel Management Team kann in der Custom List für jedes Land individuelle Reisehinweise hinterlegen, z.B. mit Verlinkungen zu Detailsseiten oder weiterführenden Dokumenten.
In den Webpart Eigenschaften hat das Travel Management Team die Option, Länder- und Kontinentnamen in der Karte anzeigen zu lassen. Dadurch fällt es dem ein oder anderen Benutzer vielleicht einfacher, das richtige Land auszuwählen. Außerdem kann das Team bei Bedarf ein Logo (z.B. das Firmenlogo) auswählen und in die Karte einblenden lassen und so zur Corporate Identity beitragen.
Umsetzung
Das Webpart verwendet Landkarten im Format SVG, die per externer HTML-Datei ins Projekt eingebunden werden. Auf diese Weise bleibt die SVG-Datei in einem entsprechenden Programm für sich getrennt zu bearbeiten. Als Tool bietet sich hier z.B. Inkscape [3] an. Damit läßt sich in der SVG-Datei jedem Pfad eine ID und ein Klassenname zuweisen. Diese Angaben werden später in der CSS-Datei des Webparts verwendet. Für die responsive Einbindung der SVG-Datei sorgt ebenfalls CSS Code, siehe z.B. [4].
Das nachfolgende Code Listing zeigt beispielhaft die Einbindung der SVG-Weltkarte und der SVG-Karte für Nordamerika.
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './TravelRestrictionsMapWebPart.module.scss';
export default class world {
public width: string;
public heigth: string;
public static _world : string = require("../../webparts/travelRestrictionsMap/custom/html/World.template.html");
public static _north_america : string = require("../../webparts/travelRestrictionsMap/custom/html/North_America.template.html");
public static _html = <div id="mySvgBox" class="${styles.svgbox}">${"".concat(world._world ,world._north_america)}</div>;
public static templateHTML: string = world._html;
}Der vorstehend genannte Code wird als Map.template.html.ts gespeichert und per "import objMapHTML from './Map.template.html';" importiert. Klicks in eine Karte kann man dann mittels OnClick-Event Handler abfangen, siehe nachfolgendes Code Listing.
private _setMapOnClickEventHandlers(): void {
const webPart: TravelRestrictionsMapWebPart = this;
let parent = this;
let myGElements = this.domElement.querySelectorAll('g');
myGElements.forEach(function (element) {
element.addEventListener('click', () => {
switch (element.id) {
case 'northamerica':
parent._hideAllSvgMaps();
const svgHeight: number = parent._getSvgHeigth('north_america');
parent._setSvgBoxHeight(svgHeight);
parent._showClickedSvgMap('north_america');
parent._showLabels('north_america');
parent._showBackIcon();
parent._setButtonOnClickEventHandlers();
break;
case 'canada':
parent._showModalDialogWithMsg(element.id, 'Currently no travel restriction.');
break;
case 'usa':
parent._showModalDialogWithMsg(element.id, 'My current travel restriction.');
break;
default:
alert('Sorry, not yet avalable ('+element.id+')');
}
});
});
}Anstatt eines statischen Texts muss dem modalen Dialog natürlich die individuelle Nachricht mit der aktuellen Reisewarnung mitgegeben werden. Diese läßt sich recht einfach z.B. anhand der Element ID aus der vom Travel Management Team gepflegten Custom List auslesen.
Ergebnis
Mit den SharePoint Framework Tutorials [5] gelingt der Einstieg in die Webpart Entwicklung sehr schnell. Durch die gute Vorbereitung der SVG-Karten in einem Zeichenprogramm lassen sich die Daten einfach ins Webpart integrieren. Entsprechende CSS-Regeln sorgen dafür, dass sich neben dem Webpart auch die angezeigten Karten responsiv verhalten und sich jeder Größe anpassen. Die farbliche Darstellung der Karten paßt sich dem in der SharePoint Site verwendeten Farbschema an und gliedert sich so optimal ins Layout des SharePoint Auftritts ein. Der Bearbeiter kann das Aussehen des Webparts zudem in kleinem Umfang gestalten. Mit der Option, das Firmenlogo einzublenden, trägt das Webpart zur Corporate Identity bei. Die Pflege der Reisewarnungen findet im Backend in einer Liste statt. Die Angaben können so z.B. aus einer Excel-Datei ganz einfach importiert werden.
Abschließend betrachtet ist in diesem kleinen Projekt ein interessantes Webpart für weltweit tätige Unternehmen entstanden, das durchaus auch nach der hoffentlich nicht mehr allzu lange anhaltenden Corona-Pandemie seinen Nutzen behalten wird.
Ausblick
Ich gehe davon aus, dass es grundsätzlich zwei Gruppen von Anwendern gibt, hinsichtlich der Auswahl eines Elements aus einer Liste. Die eine Gruppe nimmt die Auswahl gerne graphisch vor, also durch Anklicken des Elements. Die andere Gruppe mag vielleicht lieber einen Text eintippen oder ein Element aus einer Liste auswählen. Um die Akzeptanz der vorgestellten Lösung zu steigern, würde ich das Webpart noch so erweitern, dass zwischen graphischer Auswahl und Liste gewechselt werden kann.