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

Steps to create list jsom sharepoint 2013
InfoPath alternatives for form designing SharePoint

In this article I have explain how to create, and delete sharepoint list using Javascript object model.
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

Also read:
– JQuery Tabs using content search web part in SharePoint 2013

– Bind SharePoint list data using jQuery datatable using content search web part CSWP in SharePoint server 2013

– How to enable and use Content Approval in SharePoint 2013 document libraries?

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

Hope this will be helpful.

Similar SharePoint 2013 Tutorials


Leave a Reply