Create a Custom List in SharePoint 2013 Using CSOM-JavaScript

Introduction

This article explains how to create a list in SharePoint 2013 using CSOM-JavaScript.

Prerequisites

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

Procedure to be followed

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. Click on the "App.js" file.
   
   
   
   
3. Globally declare the content, web, list and listCreation objects as shown below:

      

       var context = SP.ClientContext.get_current();

       var web = context.get_web();

       var list = web.get_lists();

       var listCreation;
    

4. Now write the function to create the list in the site.
    

       function createList() {

           listCreation = new SP.ListCreationInformation();

           listCreation.set_title("MyCSOMList"); //list title

           listCreation.set_templateType(SP.ListTemplateType.genericList); //list type

           list.add(listCreation)

           context.load(list);

           context.executeQueryAsync(onListCreationSuccess, onListCreationFail);

       }
    

5. Here in this example we are creating the list using the ListCreationInformation object.
6. Using the ListCreationInformation object you can set the Title, Template Type and so on.
7. After creating the ListCreationInformation object we need to add this entity to the list object and then load the list object and execute the code by calling the "executeQueryAsync" method.
    

     function onListCreationSuccess() {

           alert("Success");

           $('#message').text("List got created");

       }

       function onListCreationFail(sender, args) {

           alert('Failed to get user name. Error:' + args.get_message());

       }
    

8. We can use the following templates to create the lists:
   
   
   • SP.ListTemplateType.GenericList
   • SP.ListTemplateType.DocumentLibrary
   • SP.ListTemplateType.Survey
   • SP.ListTemplateType.Announcements
   • SP.ListTemplateType.Contacts
   • SP.ListTemplateType.Events
   • SP.ListTemplateType.Tasks
   • SP.ListTemplateType.DiscussionBoard
   • SP.ListTemplateType.PictureLibrary
   • SP.ListTemplateType.DataSources
   • SP.ListTemplateType.XmlForm
   • SP.ListTemplateType.NoCodeWorkflows
   • SP.ListTemplateType.WorkflowProcess
   • SP.ListTemplateType.WebPageLibrary
   • SP.ListTemplateType.CustomGrid
   • SP.ListTemplateType.WorkflowHistory
   • SP.ListTemplateType.GanttTasks
   • SP.ListTemplateType.IssuesTracking
      
9. Now call the createList function inside the "document.ready" function as in the following:
   
   $(document).ready(function () {
   createList();
   });
    
10. Please find the final execution of the code below.
    
    
    

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 message “List got created” in the page.
   
   
   
   
4. To see the list that was created recently, just go to the following URL:
   
   Syntax: https://yoursite/Lists/ListName'
   Example: https://mysite/Lists/MyCSOMList
   
   
   

Summary

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