Technology Space with Nakkeeran: SharePoint 2013

Tuesday 28 June 2016

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

In this post, 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 needs 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 create 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 create or update 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.

Create, Retrieve, Update or Delete Sub Sites On SharePoint Using REST API

In this post, you will learn how to retrieve, create, update or delete the sites under a site collection, using REST API's on SharePoint 2013 / SharePoint 2016 / SharePoint Online sites like O365. The sites are considered as sub sites within the site collection.

Steps Involved:

Identify the site URL and build the REST API URL.
Use AJAX jQuery call to accomplish the necessary operation.
You can set the return value type in the AJAX call request. In my case, I have specified JSON to be the return value in the data parameter.
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.

Create Sub Site:

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

The REST API will complete the create operation http://siteurl/_api/contextinfo.
The method or type should be POST.
The form digest value is required to validate the create operation. Hence, before creating the request, the form digest value should be retrieved. We can use an AJAX call to accomplish all the tasks. The REST API will retrieve form digest value http://siteurl/_api/contextinfo. Or simply from the request digest control, we can retrieve the form digest.value.$('#__REQUESTDIGEST').val().
For creating a site, we need to send the necessary information to the Service. For this, we will use JSON format, where we will send site title, site template, site URL, description, unique permissions etc.
In the header, send the required content type and form digest value for the security validation.

To get the form digest value, you can use the logic, given below:

$.ajax  
    ({    
        url: "/_api/contextinfo",    
        type: "POST",    
        async: false,    
        headers: { "accept": "application/json;odata=verbose" },    
        success: function(data){    
             requestDigest = data.d.GetContextWebInformation.FormDigestValue;  
        },    
        error: function(data){    
        }    
    });  

The code snippet given below helps in creating a site. In this example, the form digest value is retrieved directly from the page control. (The operation given above is not required)

var restAPIURL = "/_api/web/webinfos/add";  
var newSiteData = JSON.stringify(
{
    'parameters': {  
         '__metadata': {   
               'type': 'SP.WebInfoCreationInformation'   
         },  
         'Url': 'SubSite',   
         'Description': 'Subsite created from REST API',  
         'Title': 'SubSite',  
         'Language': 1033,  
         'WebTemplate': 'STS#0',  
          'UseUniquePermissions': false  
    }  
 });  
$.ajax  
({    
    url: restAPIURL,    
    type: "POST",    
    async: false,  
    data: newSiteData,    
    headers: {  
        "accept": "application/json;odata=verbose",  
        "content-type": "application/json;odata=verbose",  
        "X-RequestDigest": $('#__REQUESTDIGEST').val()  
    },   
    success: function(data){    
         console.log('site created');  
    },    
    error: function(data){   
        console.log('Error creating site');   
    }    
});   

Retrieve Sub Site:

The site properties can be retrieved, using REST API. The URL to access the properties is,http://subsiteurl/_api/web

This will get the basic properties of the site. To get more properties, we need to use select and expand parameters in the URL. For example, the URL given above will not fetch more information on the features. To get the active features on the site, we need to pass the feature on the select and expand parameters to retrieve the information. Similarly, other collection values needs to be retrieved with the select and expand parameters.

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

//var restAPIURL = "/subsite/_api/web?$select=Features&$expand=Features/Id"  
var restAPIURL = "/subsite/_api/web"  
$.ajax  
({    
    url: restAPIURL,    
    type: "GET",  
    headers: { "accept": "application/json;odata=verbose" },  
    success: function(data){    
         console.log("Title : " + data.d.Title);  
         console.log("Description : " + data.d.Description);  
    },    
    error: function(data){   
        console.log('Error getting info');   
    }    
});  

Update Sub Site

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

The URL for updating the operation will be, http://subsiteurl/_api/web.
The method or type will be POST.
The properties that need to be updated are sent, using JSON string.
In the header parameter, we need to set and send the content type for the data type, form digest value for the security validation and “Merge” method for the update operation.

The code snippet given below helps in updating the site properties. Here, just update the title of the sub site created in the above sections:

var updateSiteData = JSON.stringify(
{  
    '__metadata': {   
         'type': 'SP.Web'   
    },  
    'Description': 'Subsite updated from REST API',  
    'Title': 'New SubSite',  
 });  
  
restAPIURL = "/subsite/_api/web"  
$.ajax  
({    
    url: restAPIURL,    
    type: "POST",  
    async: false,  
    data: updateSiteData,  
    headers: {  
         "accept": "application/json;odata=verbose",  
        "content-type": "application/json;odata=verbose",  
        "X-RequestDigest": $('#__REQUESTDIGEST').val(),    
        "X-HTTP-Method": "MERGE"  
    },   
    success: function(data){    
         console.log('site updated');  
    },    
    error: function(data){   
        console.log('Error updating site');   
    }    
});  

Delete Sub Site:

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

The URL will be http://subsiteurl/_api/web.
The type or method will be POST.
In the header parameter, we need to set and send the content type for data type, form digest value for the security validation and “Delete” method for the delete operation.

The code snippet given below helps delete the site.

var restAPIURL = "/subsite/_api/web"  
$.ajax  
({    
    url: restAPIURL,    
    type: "POST",  
    async: false,  
    headers: {  
         "accept": "application/json;odata=verbose",  
        "content-type": "application/json;odata=verbose",  
        "X-RequestDigest": $('#__REQUESTDIGEST').val(),    
        "X-HTTP-Method": "DELETE"  
    },   
    success: function(data){    
         console.log('site deleted');  
    },    
    error: function(data){   
        console.log('Error deleting site');   
    }    
});   