Working With Folders In SharePoint 2016 And Office 365 Using JavaScript Object Model

Creating a folder in SharePoint provides an easy way to manage and structure the documents in a library. It also helps to partition the document library and grant the final permission levels, within the library. Moreover, in Explorer view, the folders will work best in organizing and finding the contents. If the folder creation is enabled for a list, we can create the folders for the list as well.



Change the Radio button, shown above, to Yes to enable the folder creation in SharePoint lists. We can create the folders out of the box as well as via the programming model. As a best practice, it is recommended not to create deep levels of nested folder structures as finding the content will become difficult, which defeats the purpose of the folders.

In this article, we will see, how to work with the folders in SharePoint 2016 and Office 365, using JavaScript object model.

Internal Implementation

Scope of the article is:

• Create a new folder object in Library.
• Delete an existing folder object.

All these operations will be done, using JavaScript object model.

Create Folder

Let’s see, how we can create a folder instance in SharePoint programmatically from the client side:

• Add reference to jQuery file:
  
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  2. <script language="javascript" type="text/javascript">
• Within Document ready function call SP.SOD.executeFunc, so as to load the on demand script SP.js. Call the main starting point function say: ‘createFolder’.
  
  1. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', createFolder);
• Instantiate the client context and get the list instance.
  
  1. var clientContext = new SP.ClientContext();
  2. var oWebsite = clientContext.get_web();
  3. var oList = oWebsite.get_lists().getByTitle('Demo Library');
• Create the folder creation object,
  
  1. //Create Folder using SP.FileSystemObjectType.folder type
  2. var oListItemCretionInformation= new SP.ListItemCreationInformation();
  3. oListItemCretionInformation.set_underlyingObjectType(SP.FileSystemObjectType.folder);
  4. oListItemCretionInformation.set_leafName("NewFolder");
  5. oListItem= oList.addItem(oListItemCretionInformation);
  6. oListItem.update();
• Load the client context and execute the batch, which will send the request to the Server and perform the entire JavaScript object model operations as a batch.
  
  1. clientContext.load(oListItem);
  2. clientContext.executeQueryAsync(Success,Failure);

Output: Output from the console and UI is shown below:





Full Code

The full code for the creation of a new folder, which uses JavaScript object model is given below: