Create and delete SharePoint list using JSOM Javascript Object Model in SharePoint online

Steps to create list jsom sharepoint 2013

Here I will explain how to create, and delete SharePoint list using Javascript object model (jsom). Here we will create our HTML and JS file using SharePoint designer 2013. Open Sharepoint Designer. Create .HTML file under SiteAssets folder.

Steps to create list jsom sharepoint 2013
Steps to create list jsom sharepoint 2013

Add the necessary scripts into top of the HTML file to create a sharepoint list.
Then Add one text input box for get the list title and Add one Input button for create action.


Steps to create list jsom sharepoint 2016
Steps to create list jsom sharepoint 2016

Lets add some piece of code to create a list
Scripts:

<script src=”_layouts/15/sp.runtime.js” type=”text/javascript”></script>
<script src=”_layouts/15/sp.js” type=”text/javascript”></script>
<script src=” /SiteAssets/JS/CRUD list.js” type=”text/ javascript”></script>

HTML:
<div id=”form”>
<table>
<tr>
<td>
<p>Enter List Name</p>
</td>
<td>
<input type=”text” id=”txtlistname” />
</td>
</tr>
<tr>
<td>
<input type=”button” id=”btncreate” value=”submit” />
</td>
</tr>
</table>
</div>
<div id=”results”></div>

CreateList.js
Create a function named “btncreate”
Note:- Using this function am get the value of the list name from the HTML input box on button click event
Then pass the list value into another function “CreateList”

Code:

function btncreate()
{
$(‘#btncreate’).on(“click”, function () {
var listValue = $(‘#txtlistname’).val();
CreateList(listValue);
});
}

Code:
function CreateList(listValue)
{
var context = new SP.ClientContext() // Get the site collection from the context
var web = context.get_web(); // Get all the list properties
var listcreation = new SP.ListCreationInformation(); // Used for create a list
listcreation.set_title(listValue); // get the title of the list
listcreation.set_templateType(SP.ListTemplateType.genericList) // Provide the template for list ex:announcement, task in this scenario used genericlistproperty
this.list = web.get_lists().add(listcreation); // Create a list using web property
context.load(list); // load the values into the site context
context.executeQueryAsync(
Function.createDelegate(this, this.onsuccess),
Function.createDelegate(this, this.onfailed)
);
}

function onsuccess()
{
var results = list.get_title() + ‘Create success’; // if success message will be rendered into html element
$(‘#results’).html(results);
}
function onfailed(sender, args){
alert(‘Creation Failed’ + args.get_message() + ‘\n’ +args.get_stackTrace()); // If failed shows error message
}

Full code:
$(function () {
btncreate();
});

function btncreate()
{
$(‘#btncreate’).on(“click”, function () {
var listValue = $(‘#txtlistname’).val();
CreateList(listValue);
});
}

function CreateList(listValue)
{
var context = new SP.ClientContext()
var web = context.get_web();
var listcreation = new SP.ListCreationInformation();
listcreation.set_title(listValue);
listcreation.set_templateType(SP.ListTemplateType.genericList)
this.list = web.get_lists().add(listcreation);
context.load(list);
context.executeQueryAsync(
Function.createDelegate(this, this.onsuccess),
Function.createDelegate(this, this.onfailed)
);
}

function onsuccess()
{
var results = list.get_title() + ‘Create success’;
$(‘#results’).html(results);
}
function onfailed(sender, args){
alert(‘Creation Failed’ + args.get_message() + ‘\n’ +args.get_stackTrace());
}

Final Result:

Steps to create list jsom sharepoint online
Steps to create list jsom sharepoint online

Now let’s go and delete a created sharepoint list.

Delete a List using JSOM



HTML:

<div id=”form”>
<table>
<tr>
<td>
<p>Enter List Name</p>
</td>
<td>
<input type=”text” id=”txtlistname” />
</td>
</tr>
<tr>
<td>
<input type=”button” id=”btncreate” value=”submit” />
<input type=”button” id=”btndelete” value=”delete” />
</td>
</tr>
</table>
</div>
<div id=”results”></div>

Scripts:
<script src=”_layouts/15/sp.runtime.js” type=”text/javascript”></script>
<script src=”_layouts/15/sp.js” type=”text/javascript”></script>
<script src=” SiteAssets/JS/DeleteList.js” type=”text/javascript”></script>

DeleteList.js

$( function () {
btndelete()
});

function btndelete()
{
$(‘#btndelete’).on(“click”, function () {
var listValue = $(‘#txtlistname’).val();
DeleteList(listValue);
});
}

function DeleteList(listValue)
{
var context = new SP.ClientContext();
var web = context.get_web();
this.list = web.get_lists().getByTitle(listValue);
list.deleteObject(); // Delete the created list from the site
context.executeQueryAsync(
Function.createDelegate(this, this.ondeletesuccess),
Function.createDelegate(this, this.ondeletefailed)
);
}

function ondeletesuccess()
{
$(‘#results’).html(“List deleted successfully”); // on success bind the results in HTML code
}

function ondeletefailed(sender, args){
alert(‘Delete Failed’ + args.get_message() + ‘\n’ +args.get_stackTrace()); // display the errot details if deletion failed
}

Final result:

Steps to delete list jsom sharepoint online
Steps to delete list jsom sharepoint online

Read some Microsoft Azure tutorials


Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials: