Sharepoint Summary Links in Akkordeon gruppieren

27.11.2017 09:00

von Roland Rickborn

Ü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 (z. B. Informationen von Produktmanagern, Vorstellung von Abteilungen und Bereichen).

Problemstellung

Das Intranet einer Firma dient immer auch der Eigendarstellung bzw. der Vorstellung von Abteilungen und Bereichen. Typischerweise umfasst eine solche Vorstellung auch eine tabellarische Auflistung von Personen, die zur vorgestellten Organisationseinheit gehören. Selbst wenn man sich dabei auf die obersten Managementebenen beschränkt, verursacht die Pflege der Personenangaben eine gewisse Menge an Arbeit. In der Vergangenheit hat jede im Intranet vertretene Organisationseinheit ihr eigenes Layout der Darstellung von solchen Personenangaben realisiert.

Im neuen Intranet soll eine einheitliche Darstellung von Personenangaben sichergestellt werden. Und es soll die Möglichkeit bestehen, längere Listen von Kontakten zu gruppieren (z.B. nach den jeweiligen Teams). Außerdem soll der Aufwand für die Pflege solcher Daten minimal sein.

Lösungsansatz

Screenshot des Edit-Dialog eines Summary Link Web Part Items — Abbildung 1: Edit-Dialog eines Summary Link Web Part Items

Zum Standardumfang von Sharepoint gehört das Summary Links Web Part. Es bietet eine bequeme und einfache Option, Informationen von Benutzerprofilen abzurufen. Meist reicht die Angabe des Benutzernamens oder der E-Mail Adresse des Benutzers. Die restlichen Informationen, Profilbild, vollständiger Name, Titel, Raum- und Gebäudenummer sowie Telefonnummer und Online-Status werden automatisch vom System bezogen und immer aktuell gehalten. Pflege von weiteren Daten entfällt also. Die Darstellung solcher Benutzerdaten kann einheitlich über die Einstellungen des Web Parts gesteuert werden. In Abbildung 1 ist der Edit-Dialog eines Summary Links Web Part Items dargestellt. In diesem Formular musste lediglich der Benutzername angegeben werden. Alle restlichen Angaben, bis auf die Beschreibung, werden automatisch vom System gezogen und aktualisiert.

Diese Lösung bietet zwei nette Nebeneffekte:

Hinter jedem Kontakt verbirgt sich der Link zur MySite des Benutzers.
Der Online-Status des Kontakts enthält (bei Verwendung von Skype For Business) auch gleich alle verfügbaren Optionen zur Kontaktaufnahme (Telefon, Chat, E-Mail).

Falls ein Benutzer kein Profilbild hinterlegt hat, gerät die richtige Darstellung u.U. in Schieflage. In solchen Fällen ist es ratsam, händisch auf ein neutrales Profilbild zu verweisen.

Gruppieren...

Die Pflege und Darstellung von Kontaktinformationen per Summary Links Web Part ist nun also geklärt. Das Web Part bietet darüber hinaus die Option, Gruppen hinzuzufügen (Link "New Group"). Damit lassen sich Kontakte im Web Part gruppieren. Mittels des Links "Reorder" lässt sich die Reihenfolge der Kontakte ändern.

In Abbildung 2 ist ein Summary Links Web Part dargestellt, welches bereits 6 Kontakte in drei Gruppen enthält. Jede Gruppe soll später zu einer Akkordeonsektion werden. Alle Kontakte unterhalb einer Gruppe sollen in dieser Akkordeonsektion dargestellt werden.

Screenshot eines Summary Link Web Parts mit 6 Items und 3 Gruppen — Abbildung 2: Bearbeitetes Summary Link Web Part mit 6 Items und 3 Gruppen

...als Akkordeon anzeigen

Zwar bietet das Web Part auch die Möglichkeit, in begrenztem Maße Styles und Layout zu verändern. Dies dauert einerseits lange und würde dazu führen, dass die Darstellung von Kontakten im Intranet nicht einheitlich erfolgt. Deshalb wurde an dieser Stelle auf ein JavaScript Snippet zurückgegriffen, welches die Ausgabe des Summary Links Web Parts (Kontaktinformationen und Gruppen) in ein Akkordeon verwandelt.

Als Marker für eine Akkordeonsektion wird jeweils eine Gruppe herangezogen. Beim Ausspielen der Seite wird eine Summary Links Gruppe mit der Klasse groupheader verwendet. Zur Realisierung der Lösung muss also nur durch alle diese Klassen iteriert und alle gefundenden Klassen schrittweise als Akkordeon implementiert werden.

Der in Listing 1 vorgestellte Code iteriert durch alle groupheader Elemente, liest den Text jedes Elements aus und fügt jeweils ein neues h6* Element mit dem ausgelesenen Text hinzu. Danach werden alle folgenden Kontaktinformationen (Klasse dfwp-list) im DOM umgehängt. Am Ende werden die groupheader Elemente gelöscht, da sie nicht mehr benötigt werden. Befindet sich die Seite im Edit-Mode, wird die Ausgabe des Summary Links Web Parts nicht verändert.

Listing 1

if (!$("html").hasClass("editmode")) {

    $('.groupheader').each(function(){
        var groupheader = $(this).text();
        $('.dfwp-column').append('<h6 class="AccordionHeadline">'+groupheader+'</h6>');
        $(this).next('.dfwp-list').detach().appendTo('.dfwp-column');
        $(this).remove();
    });
}

Ergebnis

Durch geschickte Umwandlung der Gruppen und das Umorganisieren der Kontaktinformationen lässt sich die Ausgabe des Summary Links Web Parts schnell und einfach in einem Akkordeon darstellen. In Abbildung 3 ist das fertige Ergebnis der Seite im View-Mode sichtbar.

Screenshot der gerenderten Seite mit Akkordeons und Kontaktinformationen — Abbildung 3: Gerenderte Seite mit Akkordeons und Kontaktinformationen

Fazit

Gerade die arbeitsintensive Pflege von Kontaktdaten im Intranet kann unter Verwendung des Summary Links Web Parts sehr gut reduziert und optimiert werden. In Verbindung mit dem vorgestellten JavaScript Snippet kann die Ausgabe des Web Parts bei Bedarf sehr einfach umgestaltet und so strukturiert werden. Trotzdem wird auf diese Weise sichergestellt, dass die Darstellung von Kontaktdaten im Intranet einheitlich stattfindet.

* Im aktuellen Projekt beim Kunden werden bestimmte h6 Elemente beim Rendern als Akkordeons dargestellt. Dies muss natürlich von Fall zu Fall individuell angepasst werden.

Zurück