Create, Retrieve, Update Or Delete Sub Sites On SharePoint Using JavaScript Object Model

Introduction

In this article, you will learn how to retrieve, create, update or delete the sites under a site collection, using JavaScript Object Model (JSOM) on SharePoint 2013 / SharePoint Online sites like O365. The sites are considered as the sub sites within the site collection.

Before executing any operation, load the required scripts like SP.js, SP.RunTime.js. If the scripts are not initialized, use the snippet, given below:

var scriptbaseURL = _spPageContextInfo.webServerRelativeUrl + "_layouts/15/";
$.getScript(scriptbaseURL + "SP.Runtime.js",
    function ()
   {
        $.getScript(scriptbaseURL + "SP.js", RequiredFunctions);
    }
);

Create Sub Site

The operation will create a sub site within the site collection. 

• Access the context of the site and the Web object, using root site URL or the current context.
• Create WebCreationInformation Object. Set the necessary parameters like title, description, URL, Web template, site permission and the language.
• Add it to the existing Web collections and update the current site. Execute the request.

The code snippet, given below, helps in creating a site.

var rootSiteUrl = "https://abc.sharepoint.com";
var ctx = new SP.ClientContext(rootSiteUrl);
var web = ctx.get_web();
var webInfo = new SP.WebCreationInformation();
webInfo.set_title('subsite');
webInfo.set_description('subsite description');
webInfo.set_url('subsite');
webInfo.set_webTemplate('STS#0');
webInfo.set_useSamePermissionsAsParentSite(true);
webInfo.set_language(1033);

web.get_webs().add(webInfo);
web.update();
ctx.executeQueryAsync(function(){
    console.log("Sub Site Created");
},
function(sender, args){
    console.log("Failed to create sub site : " + args.get_message());
}
);

Retrieve Sub Site

The site properties can be retrieved, using JSOM. 

• Access the context and the Web object, using sub site URL.
• The basic properties can be retrieved from the above Web object.
• Other properties and information can be retrieved by accessing the necessary properties and methods. For example, just loading the Web object will not be able to retrieve more information on the features. To get the active features on the site, we need to access the feature on the select and load the object to retrieve the features information. Similarly, other collection values need to be retrieved by explicitly accessing the methods. 

The code snippet, given below, helps to retrieve the site properties.

var subSiteUrl = "https://abc.sharepoint.com/subsite";
var ctx = new SP.ClientContext(subSiteUrl);
var web = ctx.get_web();
var features = web.get_features();
// Similarly other properties and information can be retrieved from the site
ctx.load(web);
ctx.load(features);
ctx.executeQueryAsync(function(){
    console.log("Title : " + web.get_title());
    console.log("Description : " + web.get_description());
    console.log("Totally " + features.get_count() + " Features active on the site")
    // Similarly other feature properties can be retrieved.
},
function(sender, args){
    console.log("Failed to retrieve sub site info : " + args.get_message());
}
);

Update Sub Site

The update operation will be very similar to creating an operation. 

• Access the context of the site and the Web object, using sub site URL.
• Update the necessary properties, using the set methods.
• Update and execute the request. 

The code snippet, given below, helps in updating the site properties. Here, title and the description of the sub site are updated.

var subSiteUrl = "https://abc.sharepoint.com/subsite";
var ctx = new SP.ClientContext(subSiteUrl);
var web = ctx.get_web();
web.set_title('new subsite');
web.set_description('subsite description updated');
web.update();
ctx.executeQueryAsync(function(){
    console.log("Sub site properties updated");
    console.log("Title : " + web.get_title());
    console.log("Description : " + web.get_description());
 },
 function(sender, args){
    console.log("Failed to create sub site : " + args.get_message());
 }
);

Delete Sub Site

The delete operation will be very similar to creating or updating operations. Here, no input data is required. 

• Access the context of the site and the Web object, using sub site URL.
• Using the Web object, delete the site with delete object method.
• Execute the request, using the client context. 

The code snippet, given below, helps to delete the site.

var subSiteUrl = "https://abc.sharepoint.com/subsite";
var ctx = new SP.ClientContext(subSiteUrl);
var web = ctx.get_web();
web.deleteObject();
ctx.executeQueryAsync(function(){
    console.log("Sub site deleted");
},
function(sender, args){
    console.log("Failed to create sub site : " + args.get_message());
}
);

Note 

In these cases, you can check the result values in a Browser debugger console. You can change the logic to display the results on the pages. Place these scripts on the page, using the Web parts (Content Editor / Script Editor / any custom Web part) at the site collection level.  

Summary

Thus, you have learned how to create, retrieve, update or delete the sub sites, using JavaScript Object Model on SharePoint 2013 / SharePoint online sites.