SharePoint Online: Create a list using JSOM (JavaScript Object Model)

In this SharePoint jsom tutorial, we will see how to create a SharePoint list using JSOM (javascript object model).

Here we have a requirement where first we need to bind list templates to a dropdown list and then we will use an HTML form to get user inputs to create SharePoint list using JSOM.

Here we have created separate JS and HTML files. The user will select the Template and give appropriate Display Name and URL and Description.

So first we will create the HTML form and place the HTML controls like a dropdown list for list templates, text boxes for Name, and a button where on clicking a list will be created. On the button click, we will run the JSOM code to create a SharePoint list.

HTML code to create a template Dropdown:

<!DOCTYPE HTML>
<HTML>
<body>
<table>
<tr>
<td>
Template
</td>
<td colspan="4">
<select id="ddltemplate">
</select>
</td>
</tr>
</body>
</html>

Bind List Templates to Dropdown using JSOM

JSOM(JavaScript Object Model) code to bind the drop-down as list template:

var templateCol;
function retrieveListTemplate(){
var clientContext = new SP.ClientContext.get_current();
var web=clientContext.get_web();
templateCol=web.get_listTemplates();
clientContext.load(templateCol);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var templateEnumerator=templateCol.getEnumerator();
var option=";
while (templateEnumerator.moveNext()) {
var otemplate=templateEnumerator.get_current();
option+='<option value="'+otemplate.get_listTemplateTypeKind() +'">'+otemplate.get_name() +'</option>';
}
$("#ddltemplate").append(option);
}
function onQueryFailed(sender, args) {
alert('Error: '+args.get_message() +'\n'+args.get_stackTrace());
}

HTML Form (User input controls)

Here as per requirement, we have three textboxes, one dropdown list and a submit button we have also taken a <p> tag to display the success message. Here we have not added an option to the drop-down list of list template where the user will choose to create the list as per the requirement, because we will bind the dropdown list at page load. Below is HTML code:

<!DOCTYPE HTML>
<HTML>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Bihusdevelopment2/CreateListUsingJSOM.js"></script>
</head>
<body>
<table>
<tr>
<td>
Display Name
</td>
<td colspan="4">
<input type="text" id="txtDisplayNmae">
</td>
</tr>
<tr>
<td>
URL
</td>
<td colspan="4">
<input type="text"id="txtURL">
</td>
</tr>
<tr>
<td>
Template
</td>
<td colspan="4">
<select id="ddltemplate">
</select>
</td>
</tr>
<tr>
<td>
Description
</td>
<td colspan="4">
<textarea rows="4" cols="22" id="txtDescr"></textarea>
</td>
</tr>
<tr>
<td colspan="3">
</td>
<td>
<td colspan="4">
<input type="button" value="Create" id="btncreate"></input>
</td>
</tr>
</table>
<p id="psuccess" align="center"></p>
</body>
</html>
Create sharepoint online list using JSOM

JS File ( Get user inputs to create SharePoint List using JSOM)

As discussed in the previous topic we need to bind the list templates to Dropdown on page load first. Then we can get the values from the input controls which the users have entered and create the list. Here we used the button click event to retrieve the control values.

Some SP properties which we came across to retrieve and set the control values from the form to create lists:

This property is used to retrieve the title from the input control and as the title name provided by the user;
.set_title();

Similarly, this property is used to retrieve the desired URL name provided by a user;
.set_url();

This property is used to retrieve the description as provided by the user in the multiline textbox control.
.set_description();

And this property is used to set the template from the user which we have already bind it on page load. Here it retrieves the value of the template.
.set_templateType();

Below code is used to bind the values and create a list.

$(document).ready(function () {

ExecuteOrDelayUntilScriptLoaded(retrieveListTemplate, "sp.js");
$("#btncreate").click(function(){
createlist();
});
});
var templateCol;
function retrieveListTemplate(){
var clientContext = new SP.ClientContext.get_current();
var web=clientContext.get_web();
templateCol=web.get_listTemplates();
clientContext.load(templateCol);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var templateEnumerator=templateCol.getEnumerator();
var option=";
while (templateEnumerator.moveNext()) {
var otemplate=templateEnumerator.get_current();
option+='<option value="'+otemplate.get_listTemplateTypeKind() +'">'+otemplate.get_name() +'</option>';
}
$("#ddltemplate").append(option);
}
function onQueryFailed(sender, args) {
alert('Error: '+args.get_message() +'\n'+args.get_stackTrace());
}
function createlist(){
var displayname=$("#txtDisplayNmae").val();
var url=$("#txtURL").val();
var template=$('#ddltemplate :selected').val();
var description=$("#txtDescr").val();
var clientContext=newSP.ClientContext.get_current();
var web=clientContext.get_web();
var listcreation=newSP.ListCreationInformation();
listcreation.set_title(displayname);
listcreation.set_url(url);
listcreation.set_description(description);
listcreation.set_templateType(template);
var list=web.get_lists().add(listcreation);
clientContext.load(list);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onsuccess), Function.createDelegate(this, this.onfailed));
}
function onsuccess() {
$('#psuccess').html("List Created Successfully");
}
function onfailed(sender, args) {
alert('Creation Failed'+args.get_message() +'\n'+args.get_stackTrace());
}

Here we can see after entering required field data and clicking on creating a list is created with a success message as “List Created Successfully”.

Create sharepoint list using JSOM

We can see in the Site Contents that a list is created as “ProductSamples” as entered while creating the list from the form.

SharePoint online Create list using JSOM

You may like following SharePoint tutorials:

I hope the above solution will be helpful to create a list using JSOM(JavaScript Object Model) on SharePoint online.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

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

>