In diesem Blogbeitrag möchten wir euch gerne unsere Lösung für eine Navigation als Baumstruktur für SharePoint Modern UI vorstellen. Diese bildet die hierarchische Struktur der Listen und Ordner des Webs ab. Die Navigation beinhaltet drei große Features, welche wir euch in den nächsten Abschnitten vorstellen werden.

Umsetzung mittels einer SharePoint Extension

Wir haben die Navigation mittels einer SharePoint Extension vom Typ Application Customizers umgesetzt. Dadurch hat man die Möglichkeit Skripte zu einer Seite hinzuzufügen und kann auf bekannte Platzhalter für HTML-Elemente zugreifen und diese um benutzerdefinierte Renderings erweitern. In den Microsoft Docs findest du weitere Informationen über die Verwendung und Erweiterung dieser Platzhalter. Wir holen uns den Platzhalter für die Navigation über Javascript und ersetzen diesen mit unserer eigenen Komponente, welche die neue Navigation beinhaltet.
Für die grafische Oberfläche haben wir uns für die Verwendung von Office UI Fabric entschieden. Dadurch können wir ein einheitliches und modernes Design umsetzen.

Navigation als Baumstruktur

Die Daten der Listen können beispielsweise in einem Web-Property im JSON Format hinterlegt sein. Dabei hat man auch die Möglichkeit Verschachtelungen von Listen abzubilden, die es ja standardmäßig nicht gibt. Die Listenstruktur kann man auch ganz einfach über unser Office Add-In Management 4 SharePoint – das Excel-AddIn zur Verwaltung deiner SharePoint Projekte an seine Bedürfnisse anpassen. Wir lesen die Daten aus und bilden die Listen- und Ordnerstruktur in der Office UI Fabric Komponente Nav ab. Dabei rendern wir jede Liste und jeden Ordner als „Knoten“ in einer Baumstruktur, welcher aufgeklappt werden kann. Erst nachdem der User einen Knoten aufklappt, laden wir die darunterliegenden Listen und Ordner. Dadurch konnten wir die Performance optimieren, da nur benötigte Listen und Ordner geladen werden. Wir stellen die aktuelle Liste oder Ordner als selektiert dar, damit der User sofort erkennen kann wo er sich in der Listen- und Ordnerstruktur befindet.

Im folgenden Vergleich kann man den Unterschied zur standardmäßigen Navigation zu einem Ordner erkennen. Durch die Baumstruktur in der Navigation kann man viel schneller zu einer Liste oder einem Ordner navigieren und muss sich nicht durch jeden Ordner klicken.

Im nächsten Bild kann man sehen, dass es länger dauert, wenn man sich durch jeden Ordner einzeln durchklicken muss.

Ordner nach Namen suchen

Über der Navigation haben wir ein Suchfeld eingebaut, welches für die Ordnersuche verwendet werden kann. Der User kann einen Ordnernamen eingeben und suchen. Wir fragen dann alle vorhanden Ordner für jede Liste über die SharePoint API ab und überprüfen, ob ein Ordner für den eingegebenen Namen existiert. Finden wir einen passenden Ordner, klappen wir alle darüberliegenden Listen und Ordner auf und selektieren den gefundenen Ordner in der Navigation.

Bereich für benutzerdefinierte Favoriten

Als drittes Feature unserer Navigation haben wir einen Bereich für Favoriten implementiert. Dadurch hat der User die Möglichkeit Listen oder Ordner zu seinen Favoriten hinzuzufügen, um schneller darauf zugreifen zu können. Wir zeigen alle Favoriten in einer Liste an und die URL auf die Liste oder den Ordner ist hinterlegt. Dadurch kann der User auf einen Favoriten klicken und das Tool navigiert selbstständig auf die gewählte Liste oder den gewählten Ordner. Außerdem kann der User über einen Klick auf das Delete-Icon den Favoriten löschen. Außerdem werden die hinzugefügten Favoriten im JSON Format für den aktuellen User in einer eigenen SharePoint Liste abgespeichert.

Wechsel zu einem anderen Projekt

Als viertes Feature unserer Navigation haben wir den Wechsel zu einem anderen Projekt implementiert. Der User kann ein anderes Projekt über ein Dropdown auswählen und springt dann zu diesem, bleibt allerdings in der selben Ordnerstruktur. Ist der Mitarbeiter also zum Beispiel im Projekt1 in der Bibliothek 5.Projektkommunikation und wählt dann das Projekt2 aus dem Dropdown aus, dann gelangt der User sofort zur gleichen Dokumentenbibliothek im Projekt2. Das ist für Benutzer, die in vielen unterschiedlichen Projekten meistens in den gleichen Bibliotheken arbeiten, eine immense Zeitersparnis!

Haben wir euer Interesse geweckt und hättet ihr gerne nähere Informationen zu unserer Navigation? Dann nehmt gerne Kontakt mit uns auf.

Kontakt aufnehmen