SharePoint Basic List Item Operations Using TypeScript

Introduction
 
In this article, you will learn how to perform basic list item operations in SharePoint using TypeScript with the help of classes and variables.
 
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 list item 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. public context: SP.ClientContext;  
  2. public web: SP.Web;  
  3. public list: SP.List;  
  4. public listCollection: SP.ListCollection;  
  5. public listName: string;  
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.  
  1. constructor() {  
  2.     this.context = SP.ClientContext.get_current();  
  3.     this.web = this.context.get_web();  
  4.     this.listCollection = this.web.get_lists();  
  5.     this.listName = "TestList";  
  6. }  
Functions
 
The required functions are defined inside the class. In this sample, the basic list item operations, mentioned below, are defined, using the functions.
  1. Retrieve List Items
    The list items available on the list are retrieved. From the list collection property defined above, the list is retrieved using getbytitle method and then the items are retrieved with necessary query.

    Note Null query retrieves all list items.

  2. Retrieve List Item
    The list item is retrieved, using the item id. Using the list collection variable defined above, the list object is retrieved using getbytitle method and then the item is retrieved using getbyid method. The input parameter is item ID.

  3. Create List Item
    The item can be created on the list using TypeScript. The necessary input parameters are set using list item object, with the help of ListItemCreationInformation method. Using the list object retrieved, the item can be created with add method and input object.

  4. Delete List Item
    The list item can be deleted from the list. The list item is accessed by retrieving list item operation. Subsequently, delete method is used for list item object for deletion.
The collection/objects need to be loaded and executed, using the context object (defined in the constructor).
 
The code snippet, mentioned below shows the list item functions defined inside the class.
  1. class ListItemOperations {  
  2.     public context: SP.ClientContext;  
  3.     public web: SP.Web;  
  4.     public list: SP.List;  
  5.     public listCollection: SP.ListCollection;  
  6.     public listName: string;  
  7.   
  8.     constructor() {  
  9.         this.context = SP.ClientContext.get_current();  
  10.         this.web = this.context.get_web();  
  11.         this.listCollection = this.web.get_lists();  
  12.         this.listName = "TestList";  
  13.     }  
  14.   
  15.     public GetListItems() {  
  16.         var query = new SP.CamlQuery();  
  17.         var listObj = this.listCollection.getByTitle(this.listName).getItems(query);  
  18.         this.context.load(listObj);  
  19.         this.context.executeQueryAsync(function () {  
  20.             var listItems = listObj.getEnumerator();  
  21.             while (listItems.moveNext()) {  
  22.                 var listItem = listItems.get_current();  
  23.                 console.log(listItem.get_item("Title"));  
  24.             }  
  25.         }, function () {  
  26.         });  
  27.     }  
  28.   
  29.     public CreateListItem() {  
  30.         var listItemInfo = new SP.ListItemCreationInformation();  
  31.   
  32.         this.list = this.listCollection.getByTitle(this.listName);  
  33.         var newListItem = this.list.addItem(listItemInfo);  
  34.         newListItem.set_item("Title""ghi");  
  35.         newListItem.update();  
  36.         this.context.load(newListItem);  
  37.         this.context.executeQueryAsync(function () {  
  38.             console.log("Item Added"):  
  39.             console.log(newListItem.get_item("Title"));  
  40.         }, function (sender, args) {  
  41.         });  
  42.     }  
  43.   
  44.     public GetListItem() {  
  45.         this.list = this.listCollection.getByTitle(this.listName);  
  46.         var listItem = this.list.getItemById(1);  
  47.         this.context.load(listItem);  
  48.         this.context.executeQueryAsync(function () {  
  49.             console.log(listItem.get_item("Title"));  
  50.         }, function () {  
  51.         });  
  52.     }  
  53.     public DeleteListItem() {  
  54.         this.list = this.listCollection.getByTitle(this.listName);  
  55.         var listItem = this.list.getItemById(3);  
  56.         listItem.deleteObject();  
  57.         this.context.executeQueryAsync(function () {  
  58.             console.log("List Item Deleted")  
  59.         }, function () {  
  60.         });  
  61.     }  
  62. }  
Execution
 
The class is instantiated with the help of an object. The code snippet, mentioned below triggers the members defined inside the ListItemOperations class.
  1. $(document).ready(function () {  
  2.     SP.SOD.executeOrDelayUntilScriptLoaded(function () {  
  3.         SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');  
  4.     }, 'SP.RunTime.js');  
  5.   
  6. });  
  7. function GetData() {  
  8.     let listOpsObj = new ListItemOperations();  
  9.     listOpsObj.GetListItems();  
  10.     //listOpsObj.CreateListItem();  
  11.     //listOpsObj.GetListItem();  
  12.     //listOpsObj.DeleteListItem();  
  13. } 
Note

TypeScript files need to be converted to JavaScript and JavaScript file is referred to in the respective SharePoint pages (explained in the previous articles referred to above).
 
Summary
 
Thus, you have learned performing the basic SharePoint list item operations, using TypeScript programming with an object oriented approach.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now