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 constructor() 

  2. {  

  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");   this.folderCollection = this.list.get_rootFolder().get_folders();  

  7. }  


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. {  

  3. // Variables or Objects

  4. public context: SP.ClientContext;  

  5. public web: SP.Web;  

  6. public listCollection: SP.ListCollection;  

  7. public list: SP.List;  

  8. public folderCollection: SP.FolderCollection;  

  9. // Set Objects     

  10. constructor() 

  11. {  

  12. this.context = SP.ClientContext.get_current();  

  13. this.web = this.context.get_web();  

  14. this.listCollection = this.web.get_lists();  

  15. this.list = this.listCollection.getByTitle("TestLibrary");   this.folderCollection = this.list.get_rootFolder().get_folders();      

  16. }  

  17. // Retrieves all folders

  18. public RetrieveFolders() 

  19. {          

  20. let folders = this.folderCollection;  

  21. this.context.load(folders);  

  22. this.context.executeQueryAsync(function () 

  23. {              

  24. let foldersEnum = folders.getEnumerator();  

  25. while (foldersEnum.moveNext()) 

  26. {                  

  27. let folder = foldersEnum.get_current();                  

  28. console.log(folder.get_name());             

  29.  }          

  30. }, 

  31. function () {          }

  32. );      

  33. }  

  34. // Retrieves Specific Folder

  35. public RetrieveFolder() 

  36. {           

  37. let folderUrl = "/TestLibrary/Folder1";          

  38. let folder = this.folderCollection.getByUrl(folderUrl);          

  39. this.context.load(folder);  

  40. this.context.executeQueryAsync(function () 

  41. {              

  42. console.log(folder.get_name());          

  43. }, 

  44. function () {          }

  45. );      

  46. }  

  47. // Creates Folder public CreateFolder() {           

  48. let folderUrl = "/TestLibrary/TestFolder2";          

  49. let folders = this.folderCollection;          

  50. folders.add(folderUrl);  

  51. this.context.load(folders);  

  52. this.context.executeQueryAsync(function () 

  53. {              

  54. console.log("Folder Created: " + folderUrl);          

  55. }, 

  56. function () {          }

  57. );      

  58. }  

  59. // Deletes folder

  60. public DeleteFolder() {           

  61. let folderUrl = "/TestLibrary/TestFolder2";          

  62. let folder = this.folderCollection.getByUrl(folderUrl);          

  63. folder.deleteObject();  

  64. this.context.executeQueryAsync(function () 

  65. {              

  66. console.log("Folder Deleted");          

  67. }, 

  68. function () {          }

  69. );      

  70. }  

  71. }  

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. {      

  4. SP.SOD.executeOrDelayUntilScriptLoaded(function () 

  5. {          

  6. SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');      

  7. }, 

  8. 'SP.RunTime.js');  

  9. });  

  10. // Instantiate object and call the methods

  11. function GetData() 

  12. {      

  13. let folderOpsObj = new FolderOperations();      

  14. folderOpsObj.RetrieveFolders();  

  15. // Uncomment necessary methods before execution

  16. // folderOpsObj.RetrieveFolder();    

  17. // folderOpsObj.CreateFolder();

  18. // folderOpsObj.DeleteFolder();

  19. }  

Summary

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

Recent Posts

See All