Interessante Alternative für Sharepoint Promoted Links
Interessante Alternative für Sharepoint Promoted Links
In diesem Posting stelle ich eine spannende Möglichkeit vor, Promoted Links ähnliche Verknüpfungen in Sharepoint sehr flexibel zu verwenden.
Ü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
Die Portalseiten sollen ein modernes Design aufweisen und sich z.B. am Metro Kacheldesign orientieren. Das bedeutet, es sollen Kacheln in unterschiedlicher Weise verwendbar sein. Das betrifft nicht nur die Größe der Kacheln, sondern auch deren Ausrichtung, Hintergrundbild oder Farbe. Zudem soll der Mouse-over Effekt definierbar sein, sprich es soll flexible einstellbar sein, ob und wie stark der Effekt verwendet wird. Eine andere wichtige Anforderung ist, dass keine Software von Drittanbietern eingesetzt werden darf. Die Sharepoint Anwendung soll komplett out-of-the-box funktionieren. Eine letzte Anforderung ist eher als weiches Kriterium anzusehen: die Bearbeitung der Seite durch die Redakteure soll einfach sein, das bedeutet, es darf kein Editieren im HTML Code erforderlich sein.
Sharepoint bringt dafür die Funktion Promoted Links mit. Dabei handelt es sich um sog. Tiles, quadratische Kacheln, die standardmäßig mit einem Mouse-over Effekt daher kommen. Promoted Links haben immer einen blauen Hintergrund, falls kein anderes Hintergrundbild hinterlegt ist. Sie orientieren sich immer in einer Reihe, falls für das entsprechende Web Part keine fixe Breite vorgegeben ist. Sie basieren auf einer Sharepoint Liste, der sog. Promoted Link List. Diese Liste enthält grundsätzlich auch ein Feld, über das die Reihenfolge der Kacheln beeinflusst werden kann. Alle Kacheln haben immer die gleiche Größe, 100px mal 100px (falls im Page Layout nicht anders definiert). In Abbildung 1 ist eine Promoted Link Sammlung in einem Web Part mit fester Breite dargestellt.
Lösungsansatz
Die SharePoint 2013 Style Tiles [1], die Alexander Bautz auf Basis von JavaScript und mit einem CSS Stylesheet entwickelt hat, erfüllen alle genannten Anforderungen und kommen daher als Lösung sehr gut in Frage. Die Style Tiles ermöglichen unterschiedlich eingefärbte Kacheln und erlauben eine beliebige Reihenfolge und Anordnung. Wie von den Promoted Links her bekannt, kann optional pro Kachel ein Hintergrundbild definiert werden. Zusätzlich kann statt eines Bildes aber auch auf ein FontAwesome Icon verwiesen werden [2] und [3].
Anders als bei Promoted Links können bei den Style Tiles alle Verknüpfungen in einer einzigen Liste verwaltet werden. Dazu verfügt die Liste, üblicherweise heißt sie SPJSTiles Liste, über das Feld Title. Alle Listeneinträge mit dem selben Titel werden in der gleichen Style Tile Sammlung angezeigt. Beim Aufruf der Sammlung kann der Titel definiert werden. Aus Sicht des Redakteurs ergibt sich also die Änderung bzw. Vereinfachung, dass er nur eine einzige Liste pflegen muss. Abbildung 2 zeigt eine beispielhafte Umsetzung einer Style Tile Sammlung im Metro-Design, wobei es quadratische und rechteckige Kacheln gibt. Die Realisierung dieser Sammlung inform einer SPJSTiles Liste ist in Abbildung 3 zu sehen.
Customizing
Für das Setup beim Kunden habe ich neben den drei Standardkacheln weitere Kacheln definiert:
- 75x75, 150x75, 75x150, 300x75, 75x300
- 100x100, 150x100, 100x150, 300x100, 100x300
- 150x150, 300x150, 150x300, 450x150, 150x450
- 300x300
Damit ist es möglich, entsprechend dem Metro-Design einen großen Bereich mit mehreren unterschiedlich großen Kacheln darzustellen. Die Kachelgrößen können einfach in der SPJS-Tiles_v124.js vorgenommen werden (siehe Definition des Listenfeldes „TileSize“ und der Switch-Case Bedingung „switch (tileSize)“). Dabei ist mir auch ein kleiner Fehler in der JavaScript Datei aufgefallen. In Zeile 385 der JavaScript Datei müsste es lauten:
Listing 1
b.push("<ul class='spjs-tile-ul' style='height:" + z[1] + "px;'>");Ursprünglich wurde an der Stelle mit „z[0]“ auf die Breite, statt auf die Höhe verwiesen. Dies macht sich sonst bei rechteckigen Kacheln bemerkbar.
Meine zweite Anpassung betrifft die Implementierung der Style Tiles auf der Seite. Abweichend von der ursprünglichen Beschreibung führe ich die Init Methode nur dann aus, wenn die Seite nicht gerade bearbeitet wird. Falls sich die Seite im Edit Mode befindet, zeige ich stattdessen lediglich Platzhalter für jede Style Tile Sammlung an. Das vereinfacht die Bearbeitung der Seite wesentlich und verhindert, dass Style Tile Sammlungen mehrfach zur Seite hinzugefügt werden. Die entsprechende Umsetzung lässt sich Listing 2 entnehmen.
Listing 2
<link rel="stylesheet" href="/usertest/SiteAssets/font-awesome.min.css">
<link type="text/css" href="/usertest/SiteAssets/SPJS-Tiles_v124.css" rel="stylesheet">
<script type="text/javascript" src="/usertest/SiteAssets/SPJS-Tiles_v124.js"></script>
<script type="text/javascript">
if (!$("html").hasClass("editmode"))
{
//Page IS NOT in Edit Mode
spjs.tiles.init("spjs_tiles_1","Demo");
spjs.tiles.init("spjs_tiles_2","Demo2");
spjs.tiles.init("spjs_tiles_3","Demo3");
}
else
{
//Page IS in Edit Mode
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text("div[id^='spjs_'] { border:1px solid black;width:300px; } div[id^='spjs_']:before { content:'Placeholder for SPJS Tiles'; }");
}
</script>Ergebnis
Mit diesen beiden Änderungen lassen sich schnell und bequem ansprechende SharePoint Seiten im Metro-Design bauen. Das definierte Set von Kachelgrößen erlaubt eine gewisse Flexibilität und stellt trotzdem sicher, dass sich das Ergebnis immer ungefähr an die Metro Vorgaben hält.
Und durch die Überprüfung, ob sich die Seite im Edit Mode befindet oder nicht, wird dem Redakteur eine einfache Lösung präsentiert, die ihn bei der Bearbeitung der Seite gut unterstützt und die andererseits sicherstellt, dass Kacheln nicht ausversehen mehrfach auf der Seite landen.
Ein weiterer Vorteil dieser Lösung: für einen erfahrenen SharePoint Redakteur ist der Umstieg auf die neue Lösung denkbar einfach. Für einen Neuling, der direkt mit den Style Tiles beginnt, ist der Aufwand vergleichbar zum Erlernen des Umgangs mit Promoted Links.
