Unlimited files and folders hierarchy in SharePoint online using REST API

Introduction:

In this blog post, I will provide you a way to create tree view hierarchy of your SharePoint library content. And because it is based on SharePoint REST API, you can use this trick for on-premise SharePoint and also SharePoint online.

lächelnde geschäftsfrau schaut über aktenordner

Problem Statement:

One of my clients has many levels of folders and files created by their end users. They often get into trouble to find specific folder to see the files inside that folder. They asked for help!

 

Solution:

After some thoughts, I have come up with a generic algorithm to find files/ folders hierarchy up to any level using REST API in Office 365/ SharePoint 2013.

On selection of any library all the files and folders below them will be displayed in a hierarchical manner.

folder hierarchy 1

 

folder hierarchy 2

 

Detailed Steps:

Step 1 – Add JQuery File reference to the page:

Step 2 – Add below HTML Tags (Read Comments for explanation):

Step 3 – Add below styles to the page

It Is to make buttons and drop down look prettier:

Step 4 – Upload icons

Upload two icons to the style library, one for file and other for folder. It should be 16px by 16px.

Step 5

Now, the page should be ready with placeholders. Next step is to create actual hierarchy of files & folders coming from selected library. Below is the algorithm with explanation:

  • Populate all the libraries in the drop down (Refer: //Population of libraries in the code)

folder hierarchy 3

  • Get all the files and folders with the help of single REST call

  • Create object to store levels and determine whether current item is file or folder

  • Iterate through all the results of the above REST call to store all the data to a global object.

  • Refer a dummy HTML tag to store all the results. It will be hidden on the page. The idea is to iterate through this dummy HTML element which will have all the records but not in any specific order. We will use this hidden container to populate all the ordered records.
  • Iterate through all the elements of global object and create JUST LEVEL 0 elements and assign to a visible HTML div on page. We need level 0 just to initialize the recursion, level 0 elements will bring level 1 element inside, level 1 will bring level 2 and so on….

Refer code: //Creation of level 0 elements

  • Iterate through level 0 elements and fill level 1 elements below to respective parent
  • Make the call recursive to fill level 2 below level 1, so on //Call(); method is used to fill child below levels
  • Provide appropriate padding to the html elements as per the level to give hierarchical look and feel. //Provide padding as per level, padding è level * 10px

 

Step 6

Refer to the completed code below (use a text file and add to the page using content editor web part):

 

About

View all posts by

4 thoughts on “Unlimited files and folders hierarchy in SharePoint online using REST API

    1. you are right, extra codes are needed for list since the schema is different. I need to check but similar approach should work.

Leave a Reply