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.
In my other article, I have explained about implementing TypeScript basic examples in SharePoint Visual Studio SharePoint Project.
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.
  1. // Variables or Objects
  2. public context: SP.ClientContext;  
  3. public web: SP.Web;  
  4. public listCollection: SP.ListCollection;  
  5. public list: SP.List;  
  6. 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.
  1. // Set objects  
  2. constructor() {  
  3.     this.context = SP.ClientContext.get_current();  
  4.     this.web = this.context.get_web();  
  5.     this.listCollection = this.web.get_lists();  
  6.     this.list = this.listCollection.getByTitle("TestLibrary");  
  7.     this.folderCollection = this.list.get_rootFolder().get_folders();  
  8. }  
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.
  1. class FolderOperations {  
  2.     // Variables or Objects  
  3.     public context: SP.ClientContext;  
  4.     public web: SP.Web;  
  5.     public listCollection: SP.ListCollection;  
  6.     public list: SP.List;  
  7.     public folderCollection: SP.FolderCollection;  
  8.   
  9.     // Set Objects  
  10.     constructor() {  
  11.         this.context = SP.ClientContext.get_current();  
  12.         this.web = this.context.get_web();  
  13.         this.listCollection = this.web.get_lists();  
  14.         this.list = this.listCollection.getByTitle("TestLibrary");  
  15.         this.folderCollection = this.list.get_rootFolder().get_folders();  
  16.     }  
  17.   
  18.     // Retrieves all folders  
  19.     public RetrieveFolders() {  
  20.         let folders = this.folderCollection;  
  21.         this.context.load(folders);  
  22.         this.context.executeQueryAsync(function () {  
  23.             let foldersEnum = folders.getEnumerator();  
  24.             while (foldersEnum.moveNext()) {  
  25.                 let folder = foldersEnum.get_current();  
  26.                 console.log(folder.get_name());  
  27.             }  
  28.         }, function () {  
  29.         });  
  30.     }  
  31.   
  32.     // Retrieves Specific Folder  
  33.     public RetrieveFolder() {  
  34.           
  35.         let folderUrl = "/TestLibrary/Folder1";  
  36.         let folder = this.folderCollection.getByUrl(folderUrl);          
  37.         this.context.load(folder);  
  38.         this.context.executeQueryAsync(function () {  
  39.             console.log(folder.get_name());  
  40.         }, function () {  
  41.         });  
  42.     }  
  43.   
  44.     // Creates Folder  
  45.     public CreateFolder() {  
  46.           
  47.         let folderUrl = "/TestLibrary/TestFolder2";  
  48.         let folders = this.folderCollection;  
  49.         folders.add(folderUrl);  
  50.         this.context.load(folders);  
  51.         this.context.executeQueryAsync(function () {  
  52.             console.log("Folder Created: " + folderUrl);  
  53.         }, function () {  
  54.         });  
  55.     }  
  56.   
  57.     // Deletes folder  
  58.     public DeleteFolder() {  
  59.           
  60.         let folderUrl = "/TestLibrary/TestFolder2";  
  61.         let folder = this.folderCollection.getByUrl(folderUrl);  
  62.         folder.deleteObject();  
  63.         this.context.executeQueryAsync(function () {  
  64.             console.log("Folder Deleted");  
  65.         }, function () {  
  66.         });  
  67.     }  
  68. }  
Execution
 
The class is instantiated with the help of an object. The code snippet, mentioned below, triggers the members defined inside the FolderOperations class.
  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. });  
  8.   
  9. // Instantiate object and call the methods  
  10. function GetData() {  
  11.     let folderOpsObj = new FolderOperations();  
  12.     folderOpsObj.RetrieveFolders();  
  13.     // Uncomment necessary methods before execution  
  14.     //folderOpsObj.RetrieveFolder();      
  15.     //folderOpsObj.CreateFolder();  
  16.     //folderOpsObj.DeleteFolder();  
  17. }  
Summary
 
Thus, you have learned the basic folder operations that can be performed on SharePoint libraries, using TypeScript programming with object oriented approach.

Up Next
    Ebook Download
    View all
    Learn
    View all