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.
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.
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.
-
- 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.
- 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.
- 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.
- 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.
- Update Site
The site can be updated using TypeScript. In the below sample, the description of the sub site is updated.
- 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 {
-
- public context: SP.ClientContext;
- public web: SP.Web;
- public webs: SP.WebCollection;
-
- constructor(siteRelativeUrl: string) {
- this.context = new SP.ClientContext(siteRelativeUrl);
- this.web = this.context.get_web();
- this.webs = this.web.get_webs();
- }
-
- 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");
- });
- }
-
- 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");
- });
- }
-
- 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 {
-
- constructor(siteRelativeUrl: string) {
- super(siteRelativeUrl);
- }
-
- 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());
- });
- }
-
- 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.
-
- $(document).ready(function() {
- SP.SOD.executeOrDelayUntilScriptLoaded(function() {
- SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');
- }, 'SP.RunTime.js');
- });
-
- function GetData() {
- let siteOps = new SiteOperations("/");
- siteOps.GetSites();
- siteOps.GetSite();
- siteOps.CreateSubSite();
- let webOps = new WebOperations("/SubSite1");
- webOps.UpdateSite();
- webOps.DeleteSite();
- webOps.GetSites();
- webOps.CreateSubSite();
- }
Summary
Thus, you have learned the basic site operations, using TypeScript programming with help of inheritance approach.