SharePoint Basic List Operations Using TypeScript

Introduction

In this article, you will learn how to perform basic list operations in SharePoint using TypeScript with the help of classes and variables.

In my previous article, you learned TypeScript basics and prerequisites to be available on Visual Studio for SharePoint TypeScript programming.

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 ECMA script with the help of TypeScript, using 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.

declared.
public context: SP.ClientContext;
public web: SP.Web;
public list: SP.List;
public listCollection: SP.ListCollection;

Constructor

The constructor is defined with no parameters. The constructor sets the necessary objects. 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.

constructor() {
this.context = SP.ClientContext.get_current();
this.web = this.context.get_web();
this.listCollection = this.web.get_lists();
}

Functions

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

Retrieve Lists
The lists available on the site are retrieved. The list collection defined already is assigned to the local variable.
Retrieve List
The list is retrieved, using the list name. Using the list collection variable defined above, the list object is retrieved, using getbytitle method.
Create List
The list can be created on the site. The necessary input parameters are set, using listcreationinformation object. Using the list collection variable defined above, the list can be created with add method and input object.
Delete List
The list can be deleted from the site. The list is accessed by retrieve list operation. Subsequently, delete method is used for list object to delete a list.

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

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

class ListOperations {
public context: SP.ClientContext;
public web: SP.Web;
public list: SP.List;
public listCollection: SP.ListCollection;
constructor() {
this.context = SP.ClientContext.get_current();.this.web = this.context.get_web();
this.listCollection = this.web.get_lists();
}
public GetLists() {
var availableLists = this.listCollection;
this.context.load(availableLists);.this.context.executeQueryAsync(function() {
var lists = availableLists.getEnumerator();
while (lists.moveNext()) {
var list = lists.get_current();
console.log(list.get_title()); // Prints on the console
}
}, function() {});
}
public CreateList(listName: string) {
var listInfo = new SP.ListCreationInformation();
listInfo.set_title(listName);
listInfo.set_description("List created using TypeScript");
listInfo.set_templateType(SP.ListTemplateType.genericList);
var newList = this.listCollection.add(listInfo);
this.context.load(newList);
this.context.executeQueryAsync(function() {
console.log(newList.get_title()); // Prints on the console
}, function(sender, args) {});
}
public GetList(listName: string) {
var list = this.listCollection.getByTitle(listName);
this.context.load(list);
this.context.executeQueryAsync(function() {
console.log(list.get_title()); // Prints on the console
}, function() {});
}
public DeleteList(listName: string) {
var list = this.listCollection.getByTitle(listName);
list.deleteObject();
this.context.executeQueryAsync(function() {
console.log("List Deleted"); // Prints on the console
}, function() {});
}
}

Execution

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

$(document).ready(function() {
SP.SOD.executeOrDelayUntilScriptLoaded(function() {
SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');
}, 'SP.RunTime.js');
});
function GetData() {
let listOpsObj = new ListOperations();
listOpsObj.GetLists();
listOpsObj.CreateList();
listOpsObj.GetList();
listOpsObj.DeleteList();
}

Note

TypeScript files needs to be converted to JavaScript and JavaScript file is referred in the respective SharePoint pages (explained in the previous articles referred to above).
The sample code is attached in this article for the reference.

Summary

Thus, you have learned performing the basic SharePoint list operations, using TypeScript programming with an object oriented approach.

6 Comments

Join the conversation! Your thoughts help the community grow.

Syaiful Amir8y ago
Please help me.. i am delcare in javascript but i have error var context = SP.ClientContext.get_current(); that say "Cannot find name 'SP'" how to declare SP. in type scrpt ?
Ram krish9y ago
Typescript is almost like writing Object oriented client side script, its easy for C# programmers to code
Madhanmohan Devarajan9y ago
From your example i think TypeScript can be used as alternate for PowerShell
- Nakkeeran Natarajan9y ago
  It can be alternative for other programming concepts. Its very early to predict.
Ram krish9y ago
Nice.. whats your thought on using typescript for SharePoint development,as C# developer and as a Javascript developer?
- Nakkeeran Natarajan9y ago
  TypeScript is very similar to JS/ECMA script programming. It supports object oriented concepts which is a great news for developers.