Share via

SharePoint online or SharePoint 2013 : Create or Delete list using JavaScript Object Model

  • Article

Introduction:

Here we will discuss how we can create an announcement or custom list using JavaScript object model in SharePoint online. The same code will also work in SharePoint 2016 and SharePoint 2013. Also, we will see how we can delete list by using list name in SharePoint online using JavaScript object model.

Create List using JavaScript Object Model:

Here let us take a textbox and a submit button. A user can put a name in the textbox and click on submit to create the list.

Here we have put the code inside a script editor web part inside a web part page.

Below is the HTML code:

HTML Code:

<div>
    <strong>Enter List Name:</strong>
    <input type="text" id="txtListName" />
    <input type="button" id="btnSubmitListName" value="Submit" />
</div>
 
<div id="divCreateListResults"></div>

JavaScript Object Model Code:

Below is the JavaScript object model code which we can put inside the same script editor web part. Here we are calling the createList() method on the button click.

We can set the list template type by using the SP.ListTemplateType enumeration. Here we have created an announcement list so we have used SP.ListTemplateType.announcements. Similarly, if you want to create a custom list then we can use SP.ListTemplateType.genericList. You can see this article for more information.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
 
    $(function () {
        bindButtonClick();
    });
 
    function bindButtonClick() {
        $("#btnSubmitListName").on("click", function () {
            createList();
        });
    }
 
    function createList() {
        var listName = $("#txtListName").val();
        var clientContext = new SP.ClientContext();
        var oWebsite = clientContext.get_web();
        var listCreationInfo = new SP.ListCreationInformation();
        listCreationInfo.set_title(listName);
        listCreationInfo.set_templateType(SP.ListTemplateType.announcements);
        this.oList = oWebsite.get_lists().add(listCreationInfo);
        clientContext.load(oList);
        clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
        );
    }
 
    function onQuerySucceeded() {
        var results = oList.get_title() + ' successfully created!';
        $("#divCreateListResults").html(results);
    }
 
    function onQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script>

Once you Save the code and give a name and click on Submit it will create the list and display the successful message like below:

https://www.enjoysharepoint.com/wp-content/uploads/2018/07/create_list_javascript_object_model_sharepoint_online.png

From Site Contents you can see the list like below:

https://www.enjoysharepoint.com/wp-content/uploads/2018/07/SharePoint_online_create_list_javascript_object_model.png

Delete List using JavaScript Object Model:

Now we will see how we can delete a list by using JavaScript Object Model in SharePoint online. Here also we will take a textbox and a button to do the operation. A user can put a name in the textbox and click on Delete button to delete the list.

HTML Code:

Below is our HTML code:

<div>
    <strong>Enter List Name to Delete:</strong>
    <input type="text" id="txtListName" />
    <input type="button" id="btnSubmitListName" value="Delete" />
</div>
 
<div id="divDeleteListResults"></div>

JavaScript Object Model Code:

Here we are calling the deleteList() method on the button click. And we are using jQuery to get the list title from the textbox. And we are calling the getByTitle() method to delete the list.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function () {
        bindButtonClick();
    });
 
    function bindButtonClick() {
        $("#btnSubmitListName").on("click", function () {
            deleteList();
        });
    }
 
    function deleteList() {
        var listName = $("#txtListName").val();
        var clientContext = new SP.ClientContext()
        var oWebsite = clientContext.get_web();
        this.oList = oWebsite.get_lists().getByTitle(listName);
        oList.deleteObject();
        clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
        );
    }
 
    function onQuerySucceeded() {
        $("#divDeleteListResults").html("List successfully deleted!");
    }
 
    function onQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() +
        '\n' + args.get_stackTrace());
    }
</script>

Now when you Save the code and put list title in the textbox and click on the button then it will delete the list and it will show the successful message. It looks like below:

https://www.enjoysharepoint.com/wp-content/uploads/2018/07/SharePoint_online_delete_list_javascript_object_model.png

References:

Also, you can check out few Microsoft flow and Rest API articles:

Conclusion:

Here we have seen how we can create a list or delete list in SharePoint online Office 365 using JavaScript object model. Hope this will be helpful.