SharePoint Basic SubSite Operations Using TypeScript With Inheritance


In this article, you will learn how to perform basic site operations (web scoped) on SharePoint site collections/sites, using TypeScript, with the help of classes and variables. You will see how to create, retrieve, update, and delete the sites/subsites with the help of inheritance approach.

To learn about TypeScript basics and for the prerequisites to be available on Visual Studio for SharePoint TypeScript programming, you can refer to the following article.

In my other article, I have explained about implementing TypeScript basic examples in SharePoint Visual Studio project.

This article focuses more on implementing the site operations (web scoped) using ECMA script, with the help of TypeScript and object oriented programming concepts.


The class will hold the necessary members. This means, the class will hold the necessary variables, constructors, and the defined functions. In this sample, two classes are considered: basic class with retrieval and create operations and another class with update and delete operations, which inherits the base class.


The necessary variables common for all the functions are defined as the member variables. In this case, all the variables to be defined in the base class are given below.

  1. // Variables or Objects    
  2. public context: SP.ClientContext;  
  3. public web: SP.Web;  
  4. public webs: SP.WebCollection;  

The constructor can be defined either without parameters or with parameters, depending on the requirement. The context of the site can be set using the respective method. With the help of context object, the other variables can be set while using the respective methods. The variables/objects set using the constructor are context, web, and web collection.

In this sample, all the variables are set in the base class constructor. The derived class constructor will inherit the base constructor using super function.

The below code shows the base class constructor.
  1. constructor(siteRelativeUrl: string) {    
  2.     this.context = new SP.ClientContext(siteRelativeUrl);    
  3.     this.web = this.context.get_web();    
  4.     this.webs = this.web.get_webs();    
  5. }    
The below code shows the derived class constructor.
  1. constructor(siteRelativeUrl: string) {  
  2.     super(siteRelativeUrl);  
  3. }  

The required functions are defined inside the classes. The create and retrieval functions are defined in the base class. The update and delete functions are defined in the derived class. In this sample, the basic site operations, mentioned below, are defined using the functions.

  1. Retrieve Sub Sites
    The sub sites available in the site/site collection are retrieved. The web collection is loaded and executed with the help of context. Then, sub sites are accessed from context site.

  2. Retrieve Site
    The site information can be retrieved using TypeScript. The web object is loaded and executed with context.

     - To get the sub site information, the function should be present in derived class.

  3. Create Sub Site
    The sub site can be created on the site collection/site, using TypeScript. The necessary input parameters are passed using WebCreationInformation object.

  4. Update Site
    The site can be updated using TypeScript. In the below sample, the description of the sub site is updated.

  5. Delete Site
    The site can be deleted using TypeScript. The web object needs to be deleted using deleteObject method.


    • The collection/objects need to be loaded and executed for all the operations, using the context object (defined in the constructor).
    • The site to be retrieved, updated, or deleted is determined based on the context URL.

The code snippet, mentioned below, shows the site functions defined inside the class.

  1. class SiteOperations {  
  2.     // Variables or Objects    
  3.     public context: SP.ClientContext;  
  4.     public web: SP.Web;  
  5.     public webs: SP.WebCollection;  
  6.     // Set objects    
  7.     constructor(siteRelativeUrl: string) {  
  8.             this.context = new SP.ClientContext(siteRelativeUrl);  
  9.             this.web = this.context.get_web();  
  10.             this.webs = this.web.get_webs();  
  11.         }  
  12.         // Retrieves all sub sites    
  13.     public GetSites() {  
  14.             let websites = this.webs;  
  15.             this.context.load(websites);  
  16.             this.context.executeQueryAsync(function() {  
  17.                 let subSites = websites.getEnumerator();  
  18.                 while (subSites.moveNext()) {  
  19.                     let subSite = subSites.get_current();  
  20.                     console.log(subSite.get_title());  
  21.                 }  
  22.             }, function(sender, args) {  
  23.                 console.log("Error");  
  24.             });  
  25.         }  
  26.         // creates sub site    
  27.     public CreateSubSite() {  
  28.             let websites = this.webs;  
  29.             let webInfo = new SP.WebCreationInformation();  
  30.             webInfo.set_title("SubSite3");  
  31.             webInfo.set_description("SubSite created for testing TS");  
  32.             webInfo.set_url("SubSite3");  
  33.             webInfo.set_language(1033);  
  34.             webInfo.set_useSamePermissionsAsParentSite(true);  
  35.             webInfo.set_webTemplate("STS#0");  
  36.             websites.add(webInfo);  
  37.             this.context.load(websites);  
  38.             this.context.executeQueryAsync(function() {  
  39.                 console.log("SubSite Created");  
  40.             }, function(sender, args) {  
  41.                 console.log("Error");  
  42.             });  
  43.         }  
  44.         // Retrieves site    
  45.     public GetSite() {  
  46.         let website = this.web;  
  47.         this.context.load(website);  
  48.         this.context.executeQueryAsync(function() {  
  49.             console.log(website.get_title());  
  50.         }, function(sender, args) {});  
  51.     }  
  52. }  
  53. class WebOperations extends SiteOperations {  
  54.     // calls the base constructor to set the context and other objects    
  55.     constructor(siteRelativeUrl: string) {  
  56.             super(siteRelativeUrl);  
  57.         }  
  58.         // Updates site    
  59.     public UpdateSite() {  
  60.             let website = this.web;  
  61.             website.set_description("Updating using TypeScript");  
  62.             this.context.load(website);  
  63.             this.context.executeQueryAsync(function() {  
  64.                 console.log("SubSite updated" + website.get_title());  
  65.             }, function(sender, args) {  
  66.                 console.log(args.get_message());  
  67.             });  
  68.         }  
  69.         // Deletes site    
  70.     public DeleteSite() {  
  71.         let website = this.web;  
  72.         website.deleteObject();  
  73.         this.context.executeQueryAsync(function() {  
  74.             console.log("SubSite Deleted");  
  75.         }, function(sender, args) {  
  76.             console.log(args.get_message());  
  77.         });  
  78.     }  
  79. }  

The classes are instantiated with the help of objects. Context of the site is set using the constructors.

In the below sample,
  • For base class, root site URL can be set as context, by passing the site collection URL as object parameter.
  • For the derived class, the sub site URL can be set as context, by passing the sub site URL as object parameter.
The code snippet, mentioned below, triggers the members defined inside the classes. The comments are provided along with the function calls to explain every step in details.
  1. // Loads necessary files    
  2. $(document).ready(function() {  
  3.     SP.SOD.executeOrDelayUntilScriptLoaded(function() {  
  4.         SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');  
  5.     }, 'SP.RunTime.js');  
  6. });  
  7. // Instantiate object and call the methods    
  8. function GetData() {  
  9.     let siteOps = new SiteOperations("/");  
  10.     siteOps.GetSites(); // Retrieves all sub sites from site collection    
  11.     siteOps.GetSite(); // Retrieves current site(site collection) information    
  12.     siteOps.CreateSubSite(); // Creates a sub site for site collection    
  13.     let webOps = new WebOperations("/SubSite1");  
  14.     webOps.UpdateSite(); // Updates sub site SubSite1    
  15.     webOps.DeleteSite(); // Deletes sub site SubSite1    
  16.     webOps.GetSites(); // Retrieves all sub sites from SubSite1 site    
  17.     webOps.CreateSubSite(); // Creates a sub site for SubSite1 site    
  18. }  

Thus, you have learned the basic site operations, using TypeScript programming with help of inheritance approach.