Create Subsite with Custom Web Template Using JavaScript Client Object Model in SharePoint 2013 Online

Introduction

In this tip, I have explained how JavaScript can be used for creating a subsite with custom web template in SharePoint 2013 Online site.

Before starting with the code, we need to add the following js references in our page:

<script src="/_layouts/15/sp.runtime.js" type="text/javascript"> </script>
<script src="/_layouts/15/sp.js" type="text/javascript"> </script>

First, we need to fetch our custom web template. getAvailableWebTemplates method of Web object gets a collection of all web templates which are available in a site. Click here for details about this method.

var webTemplates = web.getAvailableWebTemplates(1033,false);

When creating a site programmatically, we need template’s internal code. For example, if we create a Team Site, then we need to use STS#0 (which is internal code for Team Site template) in our program. Similarly, for creating a site using a custom web template, we need to get the internal code of that template first.

We need to iterate through the webtemplate collection to retrieve our custom template with the Title provided while saving template. Template code is stored in the Name property of a webtemplate.

var enumerator = webTemplates.getEnumerator();
var customTemplate;
while(enumerator.moveNext())
{
    var webTemplate = enumerator.get_current();
    var webTitle = webTemplate.get_title();
    if(webTitle == templateTitle)
    {
        customTemplate = webTemplate.get_name();
        break;
    }
}

After fetching the template's code, we can now create our site. WebCreationInformation object is required for creating a new site. set_webTemplate method of this object takes template’s internal code as parameter. Check this link on information about this object.

var webCreationInformation = new SP.WebCreationInformation();
webCreationInformation.set_title(title);
webCreationInformation.set_description(description);
webCreationInformation.set_language(1033);
webCreationInformation.set_url(webUrl);
webCreationInformation.set_useSamePermissionsAsParentSite(true);
webCreationInformation.set_webTemplate(customTemplate);

Given below is the complete method which can be added to the js file for creating a site:

function CreateWebsite(title, description, webUrl, templateTitle)
    {    
        var context = new SP.ClientContext.get_current();
        var web = context.get_web();
        context.load(web);
        var webTemplates = web.getAvailableWebTemplates(1033,false);
        context.load(webTemplates);
        context.executeQueryAsync(function(){
                var enumerator = webTemplates.getEnumerator();
                var customTemplate;
                while(enumerator.moveNext())
                {
                    var webTemplate = enumerator.get_current();
                    var webTitle = webTemplate.get_title();
                    if(webTitle == templateTitle)
                    {
                        customTemplate = webTemplate.get_name();
                        break;
                    }
                }                
                var webCreationInformation = new SP.WebCreationInformation();
                webCreationInformation.set_title(title);
                webCreationInformation.set_description(description);
                webCreationInformation.set_language(1033);
                webCreationInformation.set_url(webUrl);
                webCreationInformation.set_useSamePermissionsAsParentSite(true);
                webCreationInformation.set_webTemplate(customTemplate);
                web.get_webs().add(webCreationInformation);
                context.executeQueryAsync(function(){
                    alert('Website created successfully.');
                }, 
                function(sender, args){ 
                    alert(args.get_message());
                    });
            }, 
            function(sender, args){ 
                alert(args.get_message())
            }
        );
    }

For running this code, users must have permissions to create a site.