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

SharePoint online create list using javascript object model
InfoPath alternatives for form designing SharePoint

In this post, we will discuss how we can create an announcement or a 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. The 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.

You can also check out my previous posts on:
– Microsoft Flow Example Save tweets that include the specific hashtag to a SharePoint list

– Switch the default experience for list and libraries from new or classic SharePoint Online Office 365

– How to customize search results look by using result types and display templates in SharePoint 20106 SharePoint 2013 or SharePoint 2010?

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 a 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:

Create list using javascript object model sharepoint 2013
Create list using javascript object model SharePoint 2013

From Site Contents you can see the list like below:

SharePoint online create list using javascript object model
SharePoint online create list using javascript object model

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. The 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:

create list using jsom sharepoint 2013
create a list using jsom SharePoint 2013

Hope this will be helpful.

Similar SharePoint 2013 Tutorials

About 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

View all posts by Bijay Kumar →

Leave a Reply