SharePoint Basic SubSite Operations Using TypeScript With Inheritance

Introduction

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.

• SharePoint Programming With TypeScript - Part one

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

• SharePoint Programming With TypeScript - Part Two

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

Class

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.

Variables

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.

// Variables or Objects
public context: SP.ClientContext;
public web: SP.Web;
public webs: SP.WebCollection;

Constructor

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.

constructor(siteRelativeUrl: string) {
    this.context = new SP.ClientContext(siteRelativeUrl);
    this.web = this.context.get_web();
    this.webs = this.web.get_webs();
}

The below code shows the derived class constructor.

constructor(siteRelativeUrl: string) {
    super(siteRelativeUrl);
}

Functions

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.
   
   Note - 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.
   
   Note
   
   
   • 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.

class SiteOperations {
    // Variables or Objects
    public context: SP.ClientContext;
    public web: SP.Web;
    public webs: SP.WebCollection;
    // Set objects
    constructor(siteRelativeUrl: string) {
            this.context = new SP.ClientContext(siteRelativeUrl);
            this.web = this.context.get_web();
            this.webs = this.web.get_webs();
        }
        // Retrieves all sub sites
    public GetSites() {
            let websites = this.webs;
            this.context.load(websites);
            this.context.executeQueryAsync(function() {
                let subSites = websites.getEnumerator();
                while (subSites.moveNext()) {
                    let subSite = subSites.get_current();
                    console.log(subSite.get_title());
                }
            }, function(sender, args) {
                console.log("Error");
            });
        }
        // creates sub site
    public CreateSubSite() {
            let websites = this.webs;
            let webInfo = new SP.WebCreationInformation();
            webInfo.set_title("SubSite3");
            webInfo.set_description("SubSite created for testing TS");
            webInfo.set_url("SubSite3");
            webInfo.set_language(1033);
            webInfo.set_useSamePermissionsAsParentSite(true);
            webInfo.set_webTemplate("STS#0");
            websites.add(webInfo);
            this.context.load(websites);
            this.context.executeQueryAsync(function() {
                console.log("SubSite Created");
            }, function(sender, args) {
                console.log("Error");
            });
        }
        // Retrieves site
    public GetSite() {
        let website = this.web;
        this.context.load(website);
        this.context.executeQueryAsync(function() {
            console.log(website.get_title());
        }, function(sender, args) {});
    }
}
class WebOperations extends SiteOperations {
    // calls the base constructor to set the context and other objects
    constructor(siteRelativeUrl: string) {
            super(siteRelativeUrl);
        }
        // Updates site
    public UpdateSite() {
            let website = this.web;
            website.set_description("Updating using TypeScript");
            this.context.load(website);
            this.context.executeQueryAsync(function() {
                console.log("SubSite updated" + website.get_title());
            }, function(sender, args) {
                console.log(args.get_message());
            });
        }
        // Deletes site
    public DeleteSite() {
        let website = this.web;
        website.deleteObject();
        this.context.executeQueryAsync(function() {
            console.log("SubSite Deleted");
        }, function(sender, args) {
            console.log(args.get_message());
        });
    }
}

Execution

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.

// Loads necessary files
$(document).ready(function() {
    SP.SOD.executeOrDelayUntilScriptLoaded(function() {
        SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');
    }, 'SP.RunTime.js');
});
// Instantiate object and call the methods
function GetData() {
    let siteOps = new SiteOperations("/");
    siteOps.GetSites(); // Retrieves all sub sites from site collection
    siteOps.GetSite(); // Retrieves current site(site collection) information
    siteOps.CreateSubSite(); // Creates a sub site for site collection
    let webOps = new WebOperations("/SubSite1");
    webOps.UpdateSite(); // Updates sub site SubSite1
    webOps.DeleteSite(); // Deletes sub site SubSite1
    webOps.GetSites(); // Retrieves all sub sites from SubSite1 site
    webOps.CreateSubSite(); // Creates a sub site for SubSite1 site
}

Summary

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