Create and Delete a List in SharePoint using JavaScript Object Model (jsom)

This JSOM SharePoint tutorial, I am going to explain to you how to create and delete a SharePoint list using the JavaScript object model (jsom) in SharePoint Online/2013/2016.

Here, we will create a list using JavaScript using hard code values, as well as I will show how to create an HTML form which will ask the user to provide the list name.

I will also show you a video tutorial, where user can create a SharePoint list using jsom.

Create SharePoint List using JavaScript (Video Tutorial)

I have also created a video tutorial and explained step by step how to create a list using javascript object model (jsom) in SharePoint Online.

Subscribe to EnjoySharePoint YouTube Channel for more SharePoint Videos.

Create a List in SharePoint using JavaScript

Below is the JavaScript code which will create a SharePoint list having hardcoded list name. The same code can be used to create a list using javascript in SharePoint 2013/2016/Online.

The code you can add inside a script editor web part or content editor web part in SharePoint web part page.

var list;
function createList() {
var clientContext = new SP.ClientContext('http://SiteURL');
var web = clientContext.get_web();
var listCreationInfo = new SP.ListCreationInformation();
listCreationInfo.set_title('My Custom List');
listCreationInfo.set_description('This is our custom list created by javascript object model');
listCreationInfo.set_templateType(SP.ListTemplateType.custom);
list = web.get_lists().add(listCreationInfo);
clientContext.load(list);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var result = list.get_title() + ' successfully created.';
alert(result);
}

function onQueryFailed(sender, args) {
alert('Could not create list: ' + args.get_message());
}

The above javascript code will create a SharePoint custom list name as “My Custom List”.

Create a SharePoint List using JavaScript Object Model

Now we will see how we can create a SharePoint list dynamically, where the list name will be provided by the user. We will create an announcement or a custom list using the JavaScript object model in SharePoint Online or SharePoint 2013/2016.

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

Below is the 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.

<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();
});
}

var oList;
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);
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:

create list in sharepoint using javascript object model

From Site Contents you can see the SharePoint list like below:

create list in sharepoint using javascript

Delete list in SharePoint using javascript

Now, we will see how to delete SharePoint list using JavaScript client object model with a hardcoded list name.

var listTitle;
var list;
function deleteList(siteUrl) {
var clientContext = new SP.ClientContext(siteUrl);
var web = clientContext.get_web();
listTitle = 'MyCustomList';
list = web.get_lists().getByTitle(listTitle);
list.deleteObject();
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var result = listTitle + ' deleted successfully';
alert(result);
}

function onQueryFailed(sender, args) {
alert('Could not able to delete list: ' + args.get_message());
}

Once you run the above code, it will delete the SharePoint list whose name is MyCustomList from the SharePoint Online/2013/2016 site.

Delete SharePoint List using JavaScript Object Model

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

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();
});
}

var oList ;
function deleteList() {
var listName = $("#txtListName").val();
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
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:

delete list in sharepoint using javascript

You may like following SharePoint jsom tutorials:

This SharePoint tutorial, we learned how to create a SharePoint list using JavaScript in SharePoint Online or SharePoint 2013/2016. We also saw how to delete a list using jsom (javascript object model) in SharePoint Online/2013/2016.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

  • […] Create or Delete list using JavaScript Object Model in SharePoint Online or SharePoint 2013 […]

  • >