Create a Folder in Document Library in SharePoint 2013 Using CSOM-JavaScript

Introduction

This article explains how to create a folder in a Document Library in SharePoint 2013 using CSOM-JavaScript.

Prerequisites

1. Ensure you have access to the Office 365 online.
2. Ensure Napa Tools is available in your site.

Use the following procedure:

1. Create an app for SharePoint using Office 365 Tools. If you have missed out on how to create an app in SharePoint 2013, then Click here.
2. Create a Document Library and name it “MyDocumentLibrary”. Refer to my article if you want to learn how to create a Document Library in SP2013.
3. Click on the Default.aspx page.
   
   
   
   
4. Add a button to create a folder and place it inside the “PlaceHolderMain” tag.
   
   <button id="btnCreateFolder" onclick="createFolder()">Create Folder</button><br/>
    
5. Click on the App.js file.
   
   
   
   
6. Globally declare the content, web and list object as shown below.
    

   var context = SP.ClientContext.get_current(); //gets the current context

   var web = context.get_web(); //gets the web object

   var list = web.get_lists(); //gets the collection of lists

   var targetList;

   var itemCreation;
    

7. Now write the function to create a folder in a Document Library:
    

   function createFolder() {

       targetList = list.getByTitle("MyDocumentLibrary");

       itemCreation = new SP.ListItemCreationInformation();

       itemCreation.set_underlyingObjectType(SP.FileSystemObjectType.folder);

       itemCreation.set_leafName("MyCustomFolder");

       var folderItem = targetList.addItem(itemCreation);

       folderItem.update();

       context.load(folderItem);

       context.executeQueryAsync(onFolderCreationSuccess, onFolderCreationFail);

    }
    

8. Here in this example we are creating a folder using the “ListItemCreationInformation” object.
9. After creating the listitem object we need to set the underlyingObjectType as a folder and leafname represents the folder name.
10. Add the ListItemCreationInformation object to the list using the additems method and assign it to an item object.
11. Then we need to load the new item object and execute the code by calling executeQueryAsync ().
     

    function onFolderCreationSuccess() {

        alert("Folder Created");

    }

    function onFolderCreationFail(sender, args) {

        alert('Failed to Create the Folder. Error:' + args.get_message());

    }
     

12. That's it. Now let's start testing.

Testing

1. Now to run the app click on the "Play" button that is available towards the left-most corner.
   
   
   
   
2. The app is packaged, deployed, and installed on your Office 365 Site.
   
   
   
   
3. Now you will be able to see the following page. Now click on the Create Folder Button.
   
   
   
   
4. To see the folder, that was recently created, just go to the following URL:
   
   Syntax: https://yoursite/DocumentLibraryName
   Example: https://mysite/MyDocumentLibrary

 

Summary

Thus in this article you saw how to create a folder in a Document Library in SharePoint 2013 using CSOM-JavaScript.