Modale Dialoge in SharePoint
Übersicht
Bei einem großen Kunden wurde für ca. 45.000 Mitarbeiter ein neues Intranet auf Basis von Microsoft SharePoint 2013 On-premise eingeführt. Im Intranet befinden sich sowohl redaktionelle Inhalte der globalen Unternehmenskommunikation, als auch Inhalte von lokalen Kommunikationsabteilungen und anderer Unternehmensorganisationen. Wie in Portalen üblich, findet die Benutzerführung über die in der Hauptnavigation verlinkten Portaleinstiegsseiten statt.
Problemstellung
HTML Image Maps sind eigentlich nicht mehr zeitgemäß. Im SharePoint Umfeld gibt es dafür gute Alternativen, z.B. Promoted Links oder die im Blogpost Interessante Alternative für Sharepoint Promoted Links [1] vorgestellten SharePoint 2013 Style Tiles.
Trotzdem kommt es immer wieder vor, dass Inhalte im Intranet veröffentlicht werden sollen, die auf einer Grafik basieren. Die Grafik dient in diesem Fall als eine Art Markenzeichen einer Kampagne, so dass darauf nicht einfach verzichtet werden kann. In der Grafik sollten bestimmte Spots anklickbar sein. Die darüber verlinkten Inhalte sollten sich in einem modalen Dialog öffnen. Die bei Redaktueren beliebte HTML Image Map bot sich in diesem Fall an. Sie hat allerdings folgende Nachteile:
- Image Maps sind normalerweise nicht responsive, so dass Anwender mit mobilen Endgeräten Schwierigkeiten haben könnten, die Inhalte zu erfassen.
- Die Pflege der Image Map wird im Quellcode vorgenommen, so dass Redakteure über gute HTML Kenntnisse verfügen müssen.
- Hyperlinks in Image Maps öffnen in der Regel im gleichen Fenster oder in einem neuen Fenster, aber nicht in einem modalen Dialog.
Gesucht wurde eine Lösung, die sich ähnlich wie eine Image Map verhält bzw. aussieht und die nicht die oben genannten Nachteile aufweist.
Lösungsansatz
Es wurden verschiede Lösungen evaluiert (SVG-Grafik mit hinterlegten Hyperlinks, SharePoint 2013 Style Tiles, HTML Image Maps). Am Ende fiel die Wahl auf eine HTML Image Map in Verbindung mit der goTo Methode der SharePoint 2013 Style Tiles.
Mit dieser Lösung können nicht alle genannten Nachteile eliminiert werden. So bleibt die initiale Erstellung der Image Map eine Sache des erfahrenen Redakteurs, da sie im Quellcode vorgenommen werden muss.
Die einzelnen Area Elemente der Map werden aus einer SharePoint Liste geladen, wofür SPServices [2] verwendet wird. In dieser Liste werden alle Attribute der Area gepflegt, also title, id, href, coordinates und shape.
Für die Darstellung der verlinkten Inhalte in modalen Dialogen wird die goTo Methode SharePoint 2013 Style Tiles verwendet, was eine geschickte Wiederverwendung der SPJS-Tiles Library darstellt, siehe [1].
Um sicherzustellen, dass die Image Map auch auf mobilen Endgeräten geöffnet werden kann, wurde die Image Map Resize Library [3] verwendet.
Image Map vorbereiten
Wie oben erwähnt, muss dieser Schritt direkt im Quellcode der Seite vorgenommen werden. Hier kann der bekannte Syntax aus einem beliebigen Image Map Generator verwendet werden. Dieser Code wird lediglich um eine Style-Anweisung bezüglich der Breite des Bildes erweitert. Dem Map Element wird eine ID gegeben, so dass es später vom JQuery Code leichter gefunden werden kann. In Listing 1 ist der HTML Code für das Bild und die Map gezeigt.
Listing 1
<img src="my_map.png" usemap="#image-map" border="0" style="width: 100%; max-width:1000px;" />
<map id="mymap" name="image-map">
<!-- Image Map elements will be filled by GetListItems() -->
</map>Image Map aus Library laden
Zunächst ist das Map Element leer. Beim Laden der Seite wird die Map mit Items aus einer SharePoint Liste befüllt. Alle Area Elemente der Map erhalten eine eindeutige ID (die ebenfalls in der SharePoint Liste angegeben wird). Die Koordinaten für die Area Elemente wurden in einem externen Image Map Generator ermittelt. Ein vollständiges Area Element besteht aus den Attributen title, id, href (mit dem Wert "'#"), shape, coords und alt. Die Methode um die Items aus der Liste abzurufen und die Map zu befüllen ist in Listing 2 dargestellt.
Aus Abbildung 1 lassen sich die Einstellungen der SharePoint Liste entnehmen. Um den Redakteuren die Pflege zu vereinfachen, wurde das Attribut Shape als Choice mit den Werten Poly, Rect und Circle angelegt. Das Attribute AreaId wurde mit der Option Unique versehen, um eindeutige IDs sicherzustellen.
Listing 2
$().SPServices({
operation: "GetListItems",
async: false,
listName: "My Image Map Library",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='AreaId' /><FieldRef Name='Coordinates' /><FieldRef Name='Shape' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var _title = $(this).attr("ows_Title")
var _id = $(this).attr("ows_AreaId")
var _coords = $(this).attr("ows_Coordinates")
var _shape = $(this).attr("ows_Shape")
var mapHtml = "<area title='"+ _title +"' id='"+ _id +"' href='#' shape='"+ _shape +"' coords='"+ _coords +"' alt='"+ _title +"'/>"
$("#mymap").append(mapHtml);
});
}
});Image Map responsive
Nachdem die Area Elemente geladen und zur Map hinzugefügt wurden, kann die Map responsive gestaltet werden. Ich habe mich dabei für Image Map Resize [4] entschieden. Alternativ bietet sich auch das Projekt jQuery RWD Image Maps [5] an. Wichtig ist nur, dass das Resizing der Map erst stattfindet, nachdem die Map vollständig geladen wurde. Ein einfacher Aufruf der Methode imageMapResize() genügt, siehe Listing 3.
Listing 3
$('map').imageMapResize();Klicks entdecken und Ziele im modalen Dialog öffnen
In Listing 2 sieht man, dass der Wert des href Attributs aller Area Elemente dem Wert # entspricht. Damit wird sichergestellt, dass ein Klick auf eine solche Area erst mal keine Auswirkung hat. Um dennoch auf einen Klick reagieren zu können, muss das entsprechende Click Event abgefangen werden. In Listing 4 sieht man die Methode, mit der diese Events abgefangen und verarbeitet werden.
Mit der SPService Methode GetListItems und durch Einschränkung des Ergebnisses durch eine CAMLQuery wird dabei gezielt nach der zuvor ermittelten AreaId gesucht. Durch die Unique Eigenschaft der SharePoint Liste ist dabei sichergestellt, dass es nur ein einziges Ergebnis geben kann.
Das tatsächliche Öffnen des so gefundenen Ziels wird mit der Methode goTo aus der SharePoint 2013 Style Tiles Library erreicht, wobei der Attributwert Dialog fest vorgegeben wird.
Listing 4
$("map[name=image-map] area").on('click', function () {
var myarea = $(this).attr('id');
var mypage = '#';
$().SPServices({
operation: "GetListItems",
async: false,
listName: "My Image Map Library",
CAMLViewFields: "<ViewFields><FieldRef Name='AreaId' /><FieldRef Name='Hyperlink' /></ViewFields>",
CAMLQuery: "<Query><Where><Eq><FieldRef Name='AreaId' /><Value Type='Text'>"+myarea+"</Value></Eq></Where></Query>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
mypage = $(this).attr("ows_Hyperlink")
});
}
});
spjs.tiles.goTo(mypage,"Dialog",this,false);
});Ergebnis
Die vorgestellte Lösung vereint die Vorzüge einer HTML Image Map mit den bekannten und einfachen Funktionen von SharePoint Listen. Zudem ist die resultierende Image Map responsive und kann bis zu einem gewissen Grad problemlos auf mobilen Endgeräten betrachtet werden. Die Pflege gestaltet sich dank SharePoint List recht einfach und kann auch von einem Redakteur mit geringen HTML Kenntnissen vorgenommen werden. Einzig die initiale Implementierung der Image Map erfordert etwas Know-How. Der Einsatz der SharePoint 2013 Style Tiles Library stellt eine charmante Art Wiederverwendung von Code dar. Als weiterer Nebeneffekt können die Inhalte, die im modalen Dialog angezeigt werden sollen, in gewöhnlichen SharePoint Pages gepflegt werden. Das erleichter wieder die Arbeit der Redakteure und stellt aber trotzdem sicher, dass diese Inhalte z.B. gesucht werden können.
In Abbildung 2 sieht man eine gewöhnliche SharePoint Page (im Hintergrund) und den Inhalt einer weiteren SharePoint Page im modalen Dialog. Der modale Dialog passt sich automatisch der Größe des Screen und des Inhalts an. Er kann über das X in der rechten oberen Ecke geschlossen werden.
Ausblick
Das Handling des modalen Dialogs kann verbessert werden, in dem eine Funktion implementiert wird, die das Schließen des Dialogs vereinfacht. Der Dialog sollte geschlossen werden können, wenn:
- die Esc-Taste gedrückt wird und
- neben den Dialog in den "Hintergrund" geklickt wird
Eine weitere Verbesserung bezieht sich auf die Image Map selbst. Ab einer gewissen Größe des Displays lässt sich die Image Map nicht mehr vernünftig bedienen. In diesem Fall sollte zwar das Bild der Image Map angezeigt werden, aber die Klick-Funktion sollte wegfallen. Stattdessen würde es sich anbieten, die Hyperlinks der Map als Liste z.b. mit einem List View Web Part (und der mobilen Ansicht davon) anzuzeigen.