SharePoint Basic List View Operations Using TypeScript

Introduction

 

In this article, you will learn how to perform basic list view operations in SharePoint, using TypeScript with the help of classes and variables. You will see how to create, retrieve, update, and delete the list views.

 

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 the list view operations using ECMA script with the help of TypeScript and object oriented programming concepts.

 

Class

 

Class holds the necessary members. This means, the class will hold necessary variables, constructors, and the defined functions.

 

Variables

 

Necessary variables, 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;
public listViews: SP.ViewCollection;

Constructor

 

The constructor can be defined with no parameters or with parameters, depending on the requirement. In this case, the list name is passed as parameter. 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. The variables/objects set, using the construct, are context, web, list collection, list name, list and list views.

constructor(listTitle: string) {
    this.context = SP.ClientContext.get_current();
    this.web = this.context.get_web();
    this.listCollection = this.web.get_lists();
    this.listName = listTitle;
    this.list = this.listCollection.getByTitle(this.listName);
    this.listViews = this.list.get_views();
}

Functions

 

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

1. Retrieve List Views
   The views available for the list are retrieved. Since the list views object is set already in the constructor, here, only the object is loaded and executed to get the necessary information with the help of context.
   
   
2. Create List View
   The view can be created for the list using TypeScript. The necessary input parameters are set using list view object, with the help of ViewCreationInformation method. Using the list collection retrieved, the new view will be added with add method and input object. The input parameters can be title, view query, row limit, view fields, view type, etc. Only title is mandatory field and other parameters can be empty.
   
   
3. Retrieve List View
   The list view is retrieved, using the view name. Using the list view collection object set above, the list view object is retrieved using getbytitle method. The input parameter is view name.
   
   
4. Update List View
   The list view can be updated using TypeScript. The view needs to be retrieved using the title and then information can be changed for the view object.
   
   
5. Delete List View
   The list view can be deleted for the list. The list view is accessed by retrieving list view operation. Subsequently, delete method is used for list view object for deletion.
   

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 list view functions defined inside the class.

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

    constructor(listTitle: string) {
        this.context = SP.ClientContext.get_current();
        this.web = this.context.get_web();
        this.listCollection = this.web.get_lists();
        this.listName = listTitle;
        this.list = this.listCollection.getByTitle(this.listName);
        this.listViews = this.list.get_views();
    }

    public GetListViews() {
        let views = this.listViews;
        this.context.load(views);
        this.context.executeQueryAsync(function () {
            let viewsEnum = views.getEnumerator();
            while (viewsEnum.moveNext()) {
                let listView = viewsEnum.get_current();
                console.log(listView.get_title());
            }
        }, function () {
        });
    }

    public CreateListView() {
        let listView = new SP.ViewCreationInformation();
        let fields: string[] = ["Title", "Author"];

        listView.set_title("Custom View");
        listView.set_viewFields(fields);
        this.listViews.add(listView);

        let query: string = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>abc</Value></Eq></Where>";
        listView.set_query(query);
        let viewType = SP.ViewType.none;
        listView.set_viewTypeKind(viewType);

        let viewCollection = this.listViews;
        viewCollection.add(listView);

        this.context.load(viewCollection);
        this.context.executeQueryAsync(function () {
            console.log("View Created");
        },
            function (sender, args) {

            });

    }

    public GetListView() {
        let viewName: string = "Custom View";
        let view: SP.View = this.listViews.getByTitle(viewName);
        this.context.load(view);
        this.context.executeQueryAsync(function () {
            console.log(view.get_title());
        }, function () {
        });
    }

    public UpdateListView() {
        let viewName: string = "Custom View";
        let listView: SP.View = this.listViews.getByTitle(viewName);

        let query: string = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>def</Value></Eq></Where>";
        listView.set_viewQuery(query);
        listView.update();

        this.context.load(listView);
        this.context.executeQueryAsync(function () {
            console.log("List View Updated");
        }, function () {
        });
    }

    public DeleteListView() {
        let viewName: string = "Custom View";
        let listView: SP.View = this.listViews.getByTitle(viewName);
        listView.deleteObject();
        this.context.executeQueryAsync(function () {
            console.log("List View Deleted");
        }, function () {
        });
    }
}

Execution

 

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

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

});
function GetData() {
    let listName = "TestList";
    let listOpsObj = new ListViewOperations(listName);
    listOpsObj.GetListViews();
    // Uncomment necessary methods before execution
    //listOpsObj.CreateListView();
    //listOpsObj.GetListView();
    //listOpsObj.UpdateListView();
    //listOpsObj.DeleteListView();
}

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 above).

 

Summary

 

Thus, you have learnt the basic list view operations that can be performed on SharePoint lists, using TypeScript programming with object oriented approach.