How to Create a List in SharePoint using JavaScript Object Model (JSOM)?

Do you need to create a SharePoint list using JavaScript? In this tutorial, I will show you how to create a list in SharePoint using JavaScript Object Model (JSOM).

The below approach will work in the classic versions of SharePoint, and not in the modern SharePoint site. For, modern SharePoint site, you can use SPFx to create a list in SharePoint.

Create a List in SharePoint using JavaScript Object Model

Now, let us see how to create a list in SharePoint using JSOM code.

First, you need to ensure the SP.js file is loaded because it contains the necessary functions to work with SharePoint lists.

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  // Your code here
});

Here is the complete JSOM code for creating a SharePoint list.

function createList(listTitle, listTemplateType, listUrl) {
    var clientContext = new SP.ClientContext.get_current();
    var web = clientContext.get_web();

    var listCreationInfo = new SP.ListCreationInformation();
    listCreationInfo.set_title(listTitle);
    listCreationInfo.set_templateType(listTemplateType);
    if (listUrl) {
        listCreationInfo.set_url(listUrl);
    }

    var newList = web.get_lists().add(listCreationInfo);
    clientContext.load(newList);
    clientContext.executeQueryAsync(
        function() {
            console.log('List created successfully!');
        },
        function(sender, args) {
            console.error('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
    );
}

In this function, listTitle is the name of the new list, listTemplateType is the type of the list (e.g., 100 for custom list), and listUrl is the URL where the list will be created (optional).

Finally, you can call the above function like below:

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  createList('My New List', SP.ListTemplateType.genericList);
});

The list will be created once the JSOM code is executed using a SharePoint script editor web part.

Create a List in SharePoint using JavaScript

Create a Custom List

To create a custom list in SharePoint, you can use the following code:

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  createList('Custom List', 100); // 100 is the ListTemplateType for a custom list
});

Create a Document Library

For creating a SharePoint document library, use the ListTemplateType for document libraries as follows:

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  createList('Documents Library', SP.ListTemplateType.documentLibrary);
});

Specifying a Custom URL for the List

If you want to specify a custom URL for the SharePoint list, you can pass it as the third argument:

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  createList('Custom URL List', 100, 'Lists/CustomURLList');
});

Create a SharePoint List with HTML Form and JSOM Code

In this example, we will create an HTML form that allows users to input the title, URL, and description of a new SharePoint list. We will then use the SharePoint JavaScript Object Model (JSOM) to create the list based on the form input.

See also  SharePoint Server Object Model Tutorial

HTML Form for List Creation

Here is the HTML code.

<!DOCTYPE html>
<html>
<head>
    <title>Create SharePoint List</title>
</head>
<body>
    <h2>Create a New SharePoint List</h2>
    <form id="createListForm">
        <label for="listTitle">List Title:</label><br>
        <input type="text" id="listTitle" name="listTitle"><br>
        <label for="listUrl">List URL:</label><br>
        <input type="text" id="listUrl" name="listUrl"><br>
        <label for="listDescription">List Description:</label><br>
        <input type="text" id="listDescription" name="listDescription"><br><br>
        <input type="button" value="Create List" onclick="createList()">
    </form>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript">
        // JSOM code goes here
    </script>
</body>
</html>

JSOM Code for SharePoint List Creation

Inside the <script> tag in the HTML, add the following JSOM code:

function createList() {
    var listTitle = document.getElementById('listTitle').value;
    var listUrl = document.getElementById('listUrl').value;
    var listDescription = document.getElementById('listDescription').value;

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
        var clientContext = new SP.ClientContext.get_current();
        var web = clientContext.get_web();

        var listCreationInfo = new SP.ListCreationInformation();
        listCreationInfo.set_title(listTitle);
        if (listUrl) {
            listCreationInfo.set_url(listUrl);
        }
        listCreationInfo.set_description(listDescription);
        listCreationInfo.set_templateType(SP.ListTemplateType.genericList);

        var newList = web.get_lists().add(listCreationInfo);
        clientContext.load(newList);
        clientContext.executeQueryAsync(
            function() {
                console.log('List created successfully!');
                alert('List created successfully!');
            },
            function(sender, args) {
                console.error('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                alert('Error: ' + args.get_message());
            }
        );
    });
}

In the createList function, we retrieve the values from the form inputs and use them to set up the new list. The set_description method is used to add a description to the list.

When the user fills out the form and clicks the “Create List” button, the createList function is called, which executes the JSOM code to create a new SharePoint list with the specified title, URL, and description.

Below is the complete code; you can add it inside a SharePoint script editor web part in a SharePoint web part page.

<!DOCTYPE html>
<html>
<head>
    <title>Create SharePoint List</title>
</head>
<body>
    <h2>Create a New SharePoint List</h2>
    <form id="createListForm">
        <label for="listTitle">List Title:</label><br>
        <input type="text" id="listTitle" name="listTitle"><br>
        <label for="listUrl">List URL:</label><br>
        <input type="text" id="listUrl" name="listUrl"><br>
        <label for="listDescription">List Description:</label><br>
        <input type="text" id="listDescription" name="listDescription"><br><br>
        <input type="button" value="Create List" onclick="createList()">
    </form>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript">
   function createList() {
    var listTitle = document.getElementById('listTitle').value;
    var listUrl = document.getElementById('listUrl').value;
    var listDescription = document.getElementById('listDescription').value;

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
        var clientContext = new SP.ClientContext.get_current();
        var web = clientContext.get_web();

        var listCreationInfo = new SP.ListCreationInformation();
        listCreationInfo.set_title(listTitle);
        if (listUrl) {
            listCreationInfo.set_url(listUrl);
        }
        listCreationInfo.set_description(listDescription);
        listCreationInfo.set_templateType(SP.ListTemplateType.genericList);

        var newList = web.get_lists().add(listCreationInfo);
        clientContext.load(newList);
        clientContext.executeQueryAsync(
            function() {
                console.log('List created successfully!');
                alert('List created successfully!');
            },
            function(sender, args) {
                console.error('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                alert('Error: ' + args.get_message());
            }
        );
    });
}
    </script>
</body>
</html>

You can see the below screenshot how it appears.

Create a List in SharePoint using JavaScript Object Model

Conclusion

I hope you now have an idea of how to create a SharePoint list using JSOM code. I have also explained how to create an HTML form HTML form with SharePoint JSOM to create a user-friendly interface for creating SharePoint lists.

See also  SharePoint provider hosted app

Feel free to tell me if you are facing any issues in the comments below.

You may also like:

>