In this blog post, we would like to introduce you to our solution for the navigation as a tree structure for SharePoint Modern UI. This represents the hierarchical structure of the Web’s lists and folders. The navigation includes three great features, which we will introduce to you in the next sections.

Implementation using a SharePoint Extension

We implemented the navigation using a SharePoint extension of the type Application Customizers. This allows you to add scripts to a page and to access well-known placeholders for HTML elements and add custom renderings to them. See the Microsoft Docs for more information about how to use and extend these placeholders. We get the placeholder for navigation via Javascript and replace it with our own component, which includes the new navigation.
We chose to use Office UI Fabric for the graphical interface. This enables us to implement a uniform and modern design.

Navigation as a tree structure

The data of the lists can be stored in a web property in JSON format for example. You also have the possibility to map nestings of lists, which do not exist by default. You can also easily customize the list structure to your needs through our Office Add-In Management 4 SharePoint – the Excel add-in to manage your SharePoint projects. We read the data and map the list and folder structure in the Office UI Fabric component Nav. In doing so, we render each list and folder as “nodes” in a tree structure that can be expanded. Only after the user opens a node, we load the underlying lists and folders. This allowed us to optimize performance by loading only required lists and folders. We render the current list or folder as selected so that the user can immediately recognize where he is in the list and folder structure.

In the following comparison you can see the difference to the default navigation to a folder. Due to the tree structure in the navigation, you can navigate to a list or folder much faster and do not have to “click through” all folders once.

In the next picture you can see that it takes longer if you have to click through each folder individually.

Search folders by name

Above the navigation we have built in a search box, which can be used for folder search. The user can enter and search for a folder name. We check all existing folders for each list through the SharePoint API and verify if a folder exists for the name you typed. If we find a folder for the given name, we will open all the lists and folders above it and select the found folder in the navigation.

Custom Favorites Area

As a second feature of our navigation, we have implemented an area for favorites. This allows the user to add lists or folders to their favorites for quicker access. We show all favorites in a list and the URL on the list or folder is stored. This allows the user to click on a favorite and the tool navigates to the selected list or folder on its own. In addition, the user can delete the favorite by clicking on the Deleteicon. In addition, the added favorites in JSON format for the current user are stored in their own SharePoint list.

Switch to another project

As the fourth feature of our navigation, we have implemented the switch to another project. The user can select another project via a drop-down and then jumps to it, but remains in the same folder structure. For example, if the employee is in Project1 in the 5.Project Communication library and then selects Project2 from the drop-down, the user immediately is in the same document library in Project2. This is a huge time saving for users who mostly work in the same libraries in many different projects!

Have we aroused your interest and would you like more information about our navigation? Then please get in touch with us.

Contact