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.

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

public context: SP.ClientContext;
public web: SP.Web;
public list: SP.List;
public listCollection: SP.ListCollection;
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.  

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

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.

class ListItemOperations {
    public context: SP.ClientContext;
    public web: SP.Web;
    public list: SP.List;
    public listCollection: SP.ListCollection;
    public listName: string;

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

    public GetListItems() {
        var query = new SP.CamlQuery();
        var listObj = this.listCollection.getByTitle(this.listName).getItems(query);
        this.context.load(listObj);
        this.context.executeQueryAsync(function () {
            var listItems = listObj.getEnumerator();
            while (listItems.moveNext()) {
                var listItem = listItems.get_current();
                console.log(listItem.get_item("Title"));
            }
        }, function () {
        });
    }

    public CreateListItem() {
        var listItemInfo = new SP.ListItemCreationInformation();

        this.list = this.listCollection.getByTitle(this.listName);
        var newListItem = this.list.addItem(listItemInfo);
        newListItem.set_item("Title", "ghi");
        newListItem.update();
        this.context.load(newListItem);
        this.context.executeQueryAsync(function () {
            console.log("Item Added"):
            console.log(newListItem.get_item("Title"));
        }, function (sender, args) {
        });
    }

    public GetListItem() {
        this.list = this.listCollection.getByTitle(this.listName);
        var listItem = this.list.getItemById(1);
        this.context.load(listItem);
        this.context.executeQueryAsync(function () {
            console.log(listItem.get_item("Title"));
        }, function () {
        });
    }
    public DeleteListItem() {
        this.list = this.listCollection.getByTitle(this.listName);
        var listItem = this.list.getItemById(3);
        listItem.deleteObject();
        this.context.executeQueryAsync(function () {
            console.log("List Item Deleted")
        }, function () {
        });
    }
}

Execution

 

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

$(document).ready(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');
    }, 'SP.RunTime.js');

});
function GetData() {
    let listOpsObj = new ListItemOperations();
    listOpsObj.GetListItems();
    //listOpsObj.CreateListItem();
    //listOpsObj.GetListItem();
    //listOpsObj.DeleteListItem();
}

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.