SharePoint Basic Folder Operations Using TypeScript

Introduction

 

In this article, you will learn how to perform basic folder operations on SharePoint libraries, using TypeScript, with the help of classes and variables. You will see how to create, retrieve, and delete folders on libraries.

 

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

• SharePoint Programming with TypeScript - Part 1
  

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

• SharePoint Programming With TypeScript - Part Two
  

This article focuses more on implementing folder operations 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.

 

Variables

 

The necessary variables which will be common for all the functions are defined as the member variables. In this case, the variables are given below.

// Variables or Objects
public context: SP.ClientContext;
public web: SP.Web;
public listCollection: SP.ListCollection;
public list: SP.List;
public folderCollection: SP.FolderCollection;

Constructor

 

The constructor can be defined with no 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 using the respective methods. The variables/objects set using the constructor are context, web, list collection, list and folder collection.

// Set objects
constructor() {
    this.context = SP.ClientContext.get_current();
    this.web = this.context.get_web();
    this.listCollection = this.web.get_lists();
    this.list = this.listCollection.getByTitle("TestLibrary");
    this.folderCollection = this.list.get_rootFolder().get_folders();
}

Functions

 

The required functions are defined inside the class. In this sample, the basic folder operations, mentioned below, are defined using the functions.

 

1. Retrieve Folders 

The folders available in the library are retrieved. The list collection is retrieved from the context, then the corresponding list is retrieved. Then folders are accessed from root folder. 

 

2. Retrieve Folder 

The folder from the library can be retrieved using TypeScript. After retrieving all the folders using the above operation, the particular folder is accessed using the URL. The input parameter is folder URL.

 

3. Create Folder

The folder can be created on the library using TypeScript. The folder URL is used to create the folder with add method. The method is applied to the folder collection.

 

4. Delete Folder 

The folder from the library can be deleted using TypeScript. The folder is accessed from the folder collection using the folder URL. Then folder object is deleted using the delete method.

 

Note

The collection/objects need to be loaded and executed for all the operations, using the context object (defined in the constructor).

 

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

class FolderOperations {
    // Variables or Objects
    public context: SP.ClientContext;
    public web: SP.Web;
    public listCollection: SP.ListCollection;
    public list: SP.List;
    public folderCollection: SP.FolderCollection;

    // Set Objects
    constructor() {
        this.context = SP.ClientContext.get_current();
        this.web = this.context.get_web();
        this.listCollection = this.web.get_lists();
        this.list = this.listCollection.getByTitle("TestLibrary");
        this.folderCollection = this.list.get_rootFolder().get_folders();
    }

    // Retrieves all folders
    public RetrieveFolders() {
        let folders = this.folderCollection;
        this.context.load(folders);
        this.context.executeQueryAsync(function () {
            let foldersEnum = folders.getEnumerator();
            while (foldersEnum.moveNext()) {
                let folder = foldersEnum.get_current();
                console.log(folder.get_name());
            }
        }, function () {
        });
    }

    // Retrieves Specific Folder
    public RetrieveFolder() {

        let folderUrl = "/TestLibrary/Folder1";
        let folder = this.folderCollection.getByUrl(folderUrl);
        this.context.load(folder);
        this.context.executeQueryAsync(function () {
            console.log(folder.get_name());
        }, function () {
        });
    }

    // Creates Folder
    public CreateFolder() {

        let folderUrl = "/TestLibrary/TestFolder2";
        let folders = this.folderCollection;
        folders.add(folderUrl);
        this.context.load(folders);
        this.context.executeQueryAsync(function () {
            console.log("Folder Created: " + folderUrl);
        }, function () {
        });
    }

    // Deletes folder
    public DeleteFolder() {

        let folderUrl = "/TestLibrary/TestFolder2";
        let folder = this.folderCollection.getByUrl(folderUrl);
        folder.deleteObject();
        this.context.executeQueryAsync(function () {
            console.log("Folder Deleted");
        }, function () {
        });
    }
}

Execution

 

The class is instantiated with the help of an object. The code snippet, mentioned below, triggers the members defined inside the FolderOperations class.

// 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 folderOpsObj = new FolderOperations();
    folderOpsObj.RetrieveFolders();
    // Uncomment necessary methods before execution
    //folderOpsObj.RetrieveFolder();
    //folderOpsObj.CreateFolder();
    //folderOpsObj.DeleteFolder();
}

Summary

 

Thus, you have learned the basic folder operations that can be performed on SharePoint libraries, using TypeScript programming with object oriented approach.