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.
// 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.
Comments