Bind SharePoint list templates to dropdown list using JavaScript

In this SharePoint tutorial, we will discuss how to bind list templates to a dropdown list using JavaScript in SharePoint Online or SharePoint 2013/2016/2019.

Bind SharePoint list templates to dropdownlist using JavaScript

Here we will create an HTML dropdown and then using JSOM (JavaScript object model) we will bind the list templates.

HTML code to create dropdown list

Here we are creating an HTML dropdown list and are not adding options as we need to bind the dropdown on page load at run time from JSOM web property.

Below is HTML code to create the drop down as per the above requirement.

<!DOCTYPE>
<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>
Template
</td>
<tdcolspan="4″>
<selectid="ddltemplate">
</select>
</td>
</tr>
</body>
</html>

SP namespace template property:

The following property is used to gets a value, that specifies the list server template.

.get_listTemplateTypeKind()

The following property is used to get the template name.

.get_name()

JSOM code to bind list template (values and name) to drop-down list:

By using following JSOM code we bind list templates to a drop-down list.

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListTemplate, "sp.js");
});
vartemplateCol;
functionretrieveListTemplate()
{
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));
}
functiononQuerySucceeded(sender, args)
{
vartemplateEnumerator=templateCol.getEnumerator();
varoption=";
while (templateEnumerator.moveNext()) {
varotemplate=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());
}

Here we can see how the dropdown list looks after binding.

You may like following SharePoint tutorials:

This SharePoint tutorial, we learned how to bind list templates to a dropdown list using JavaScript in SharePoint Online or SharePoint 2013/2016/2019.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

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

>