How To Create A Document Library Using CSOM For Content Editor WebPart Using JavaScript

In this article, we will explore how to create a document library step by step using JavaScript.
 
Why we create CEWP
 
So that we can utilize the client-side computing by using CSOM.  
 
Let's start step by step.

Step 1

Save the below script as a text file and upload it to in Site Assets page.
 
Step 2

Add Content Editor Web Part (CEWP) to your SharePoint site page. Create site page >> add CEWP in your page -
 
1 Click "Insert" option
2. Select "Media and Content".
3. Select Content Editor > Edit web part.
 
Step 3

Pass this script file's reference in your CEWP.
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  
  2. </script>  
  3. <script language="javascript" type="text/javascript">  
  4.     $(document).ready(function() {  
  5.         SP.SOD.executeFunc('sp.js''SP.ClientContext', createDocLib);  
  6.     });  
  7.   
  8.     function createDocLib() {  
  9.         // Below we will pass Get Client Context and Web Object    
  10.         var clientContext = new SP.ClientContext();  
  11.         var oWeb = clientContext.get_web();  
  12.         //Create Library Creation Information and add it to List Collection    
  13.         var libraryCreationInfo = new SP.ListCreationInformation();  
  14.         libraryCreationInfo.set_title('My Test Library');  
  15.         libraryCreationInfo.set_description('This is a Test Library Using CEWP');  
  16.         libraryCreationInfo.set_templateType(SP.ListTemplateType.documentLibrary);  
  17.         var oListColl = oWeb.get_lists().add(libraryCreationInfo);  
  18.         //how to Load Client Context and Execute batch below    
  19.         clientContext.load(oListColl);  
  20.         clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  
  21.     }  
  22.   
  23.     function QuerySuccess() {  
  24.         console.log(" congratYour Document Library created successully.");  
  25.     }  
  26.   
  27.     function QueryFailure(sender, args) {  
  28.         console.log('Request failed - ' + args.get_message());  
  29.     }  
  30. </script>  
My OUTPUT looks like the below screenshot. 
 
 
Try it in your environment.
 
Soon, we will create more CSOM real-world scenario. So, stay tuned and follow me.
Ebook Download
View all
Learn
View all