In diesem Blogbeitrag stellen wir euch Smarter Navigation als Lösung für eine Navigation in Baumform in der SharePoint Modern UI vor. Die Erweiterung bildet die hierarchische Struktur von Listen und Ordnern detailgetreu ab und erleichtert damit die Orientierung in komplexen Projekträumen. Die Navigation bündelt vier zentrale Features, die wir im Folgenden im Detail vorstellen.
Umsetzung mittels einer SharePoint Extension
Wir haben die Navigation als SharePoint Extension vom Typ Application Customizer umgesetzt. Dadurch lassen sich Skripte zu einer Seite hinzufügen, vorhandene Platzhalter für HTML-Elemente auslesen und um benutzerdefinierte Renderings erweitern. In den Microsoft Docs findest du weitere Informationen zur Verwendung und Erweiterung dieser Platzhalter. Wir greifen den Navigation-Platzhalter per JavaScript ab und ersetzen ihn durch unsere eigene Komponente, die das neue Menü rendert.
Für die grafische Oberfläche setzen wir auf Office UI Fabric (heute: Fluent UI), um ein konsistentes und modernes Erscheinungsbild sicherzustellen.
Navigation als Baumstruktur
Die Daten der Listen können beispielsweise in einem Web-Property im JSON-Format hinterlegt werden. So lassen sich sogar verschachtelte Listen darstellen, die SharePoint standardmäßig nicht anbietet. Die Listenstruktur kannst du bequem über unser Office Add-in Management 4 SharePoint – das Excel-Add-in zur Verwaltung deiner SharePoint Projekte anpassen. Wir lesen die Daten aus und bilden die Listen- und Ordnerstruktur in der Office-UI-Fabric-Komponente Nav ab. Jede Liste und jeder Ordner erscheint als aufklappbarer Knoten, der sich intuitiv bedienen lässt.
Performanceoptimiertes Laden der Inhalte
Erst nachdem Nutzerinnen und Nutzer einen Knoten öffnen, laden wir die darunterliegenden Listen und Ordner nach. Dadurch optimieren wir die Performance deutlich, weil ausschließlich benötigte Elemente übertragen werden. Die aktuell geöffnete Liste oder der Ordner werden als selektiert markiert, damit jederzeit klar ist, wo man sich in der Struktur befindet.
Vergleich mit der Standardnavigation
Im folgenden Vergleich erkennst du, wie viel schneller sich Ordner und Bibliotheken finden lassen, wenn die Navigation als Baumstruktur aufgebaut ist. Statt sich durch jeden Ordner zu klicken, genügt ein Blick auf die vollständig dargestellte Struktur.
Das folgende Beispiel zeigt, wie lange es dauert, wenn jede Ebene einzeln geöffnet werden muss.
Ordner nach Namen suchen
Über der Navigation haben wir ein Suchfeld integriert, das gezielt Ordner findet. Nach der Eingabe eines Namens fragen wir über die SharePoint API alle vorhandenen Ordner pro Liste ab und prüfen, ob ein Treffer existiert. Sobald wir einen passenden Ordner finden, klappen wir alle übergeordneten Ebenen automatisch auf und markieren den Ordner direkt in der Navigation.
Bereich für benutzerdefinierte Favoriten
Als drittes Feature haben wir einen Favoritenbereich ergänzt. So lassen sich häufig genutzte Listen oder Ordner mit einem Klick vormerken und anschließend direkt öffnen. Wir listen alle Favoriten inklusive verlinkter Ziel-URL auf, wodurch der Wechsel in Sekundenschnelle erfolgt. Über das Delete-Icon lassen sich Einträge wieder entfernen. Die Favoriten speichern wir pro Benutzer im JSON-Format in einer separaten SharePoint-Liste, damit sie auf allen Geräten zur Verfügung stehen.
Wechsel zu einem anderen Projekt
Als viertes Feature erlaubt unsere Navigation den Wechsel zwischen Projekten. Über ein Dropdown lässt sich ein anderes Projekt auswählen; die Navigation springt anschließend automatisch zur identen Ordnerstruktur. Befindet sich eine Mitarbeiterin beispielsweise im Projekt1 in der Bibliothek 5.Projektkommunikation und wählt anschließend Projekt2, landet sie sofort in derselben Dokumentenbibliothek des zweiten Projekts. Wer parallel in vielen Projekten arbeitet, spart dadurch enorm viel Zeit.
Kontakt aufnehmen
Haben wir euer Interesse geweckt und möchtet ihr mehr über unsere Navigation erfahren? Dann nehmt gerne Kontakt mit uns auf.
