Create a List in SharePoint 2013 Using JavaScript

You can use the SharePoint client object model to retrieve, update and manage data in SharePoint 2013. SharePoint makes the object model available in the following forms:

  • .NET Framework redistributable assemblies
  • JavaScript library
  • REST/OData endpoints
  • Windows Phone assemblies
  • Silverlight redistributable assemblies

This article shows how to perform basic operations using the JavaScript object model. You can add a reference to the object model using HTML <script> tags.

The following sections describe tasks that you can complete programmatically and they include JavaScript code examples that show the operations.

Procedure

Open your SP Site in SharePoint 2013 Designer. Then select an Assets icon in the designer ribbon to add a JavaScript file.

asset

After adding a JavaScript file, this file is available in the SharePoint Site Assets Folder.

javascript file

Go to the SP site Page and add a New page to the SharePoint site.

new page

After adding a page select an Insert button in the Ribbon Menu.

insert

Then add a Content Editor Web part into the page.

content editor

Edit the WebPart and add a JavaScript file link to the content link.

webpart

Save the web part and save the page in the site. Click the button!

save webpart

List Created Successfully.

list created

Source Code

  1. <button onclick="createList()">Click here to Create a List</button>  
  2. <script>  
  3. function createList()   
  4. {  
  5.     var siteUrl="http://win-3ovliburp39";  
  6.     var clientContext = new SP.ClientContext(siteUrl);  
  7.     var oWebsite = clientContext.get_web();  
  8.     alert(oWebsite);  
  9.     var listCreationInfo = new SP.ListCreationInformation();  
  10.     listCreationInfo.set_title('CustomListAnnouncement');  
  11.     listCreationInfo.set_templateType(SP.ListTemplateType.announcements);  
  12.     this.oList = oWebsite.get_lists().add(listCreationInfo);  
  13.     clientContext.load(oList);  
  14.     clientContext.executeQueryAsync(  
  15.     Function.createDelegate(thisthis.onQuerySucceeded),   
  16.     Function.createDelegate(thisthis.onQueryFailed)  
  17. );  
  18. }  
  19.   
  20. function onQuerySucceeded()   
  21. {  
  22.     alert("result");  
  23.     var result = oList.get_title() + ' created.';  
  24.     alert(result);  
  25. }  
  26.   
  27. function onQueryFailed(sender, args)   
  28. {  
  29.     alert('Request failed. ' + args.get_message() +   
  30.     '\n' + args.get_stackTrace());  
  31. }  
  32. </script>  
Thanks for reading my article. 

Up Next
    Ebook Download
    View all
    Learn
    View all