Getting Started With SharePoint Basic Field Operations Using TypeScript With Inheritance

Introduction

In this article, you will learn how to perform the basic field/column operations (both site scoped and list scoped columns) on SharePoint sites or lists, using TypeScript, with the help of the classes and the variables. In this sample, the field operations for the site and the list are implemented, using the inheritance concept.

In my previous article, you saw how to create, retrieve, update, and delete the site fields with the help of an Object Oriented approach.

SharePoint Basic Site Field Operations Using TypeScript

To learn about TypeScript basics and for the prerequisites to be available on Visual Studio for SharePoint TypeScript programming, you can refer to the article given below.

SharePoint Programming With TypeScript - Part one

In my other article, I explained about implementing TypeScript basic examples in SharePoint Visual Studio projects.

SharePoint Programming With TypeScript - Part Two

This article focuses more on implementing the site column operations for SharePoint sites and the lists, using ECMA script, with the help of TypeScript, using Object Oriented programming concepts (with inheritance).

Class

The class holds the necessary members. This means, the class will hold the necessary variables, constructor and the functions. In this example, two classes will be considered.

The base class will hold all the necessary functions with the variables and the constructors related to the site operations.
Another class will hold only the variables and the constructor, inheriting the base class.

Variables

The necessary variables, common for all the functions, are defined as the member variables. In this case, all the variables to be defined in the base class are given below.

public context: SP.ClientContext;
public site: SP.Site;
public web: SP.Web;
public fields: SP.FieldCollection;

The snippet given below shows the variables used for the second class. The other variables are inherited from the base class.

public lists: SP.ListCollection;
public list: SP.List;
public listFields: SP.FieldCollection;

Constructor

The base class constructor is defined with no parameter. Here, the context of the site is set, the respective Web object is retrieved, and then the site fields are retrieved, using the corresponding methods.

constructor() {
this.context = new SP.ClientContext();
this.site = this.context.get_site();
this.web = this.site.get_rootWeb();
this.fields = this.web.get_fields();
}

Another class holds the constructor with the list name as a parameter. Since the class inherits the base class, only list object and the list fields are retrieved, using the corresponding methods.

constructor(listName: string) {
super();
this.lists = this.web.get_lists();
this.list = this.lists.getByTitle(listName);
this.fields = this.list.get_fields();
}

Functions

The required functions are defined in the base class. In this sample, the basic field operations mentioned below are defined, using the functions. The functions are inherited to the list class as well.

1. Retrieve Fields

The fields available in the site/list are retrieved. For the site fields, the field collection is retrieved with the help of the Web object. For the list fields, the collection is retrieved from the list object.

2. Retrieve Field

The field from the Web/list object is retrieved, using the field title or name. After retrieving all the fields, using the operation mentioned above, the particular field is accessed, using the getbytitle method. Subsequently, the query will be executed. The input parameter is the field title.

3. Create Field

The field can be created on the site collection with the help of field XML and the necessary content type information. It is added to the field collection (based on the field scope). The sample given below shows creating a text field.

4. Delete Field

The field to be deleted needs to be retrieved, using the retrieval operation, mentioned above. Now, the field object is deleted, using the delete method before executing the query.

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 functions defined inside both the classes.

// Variables and functions related to site
class SPFieldOperations {
// Variables or Objects
public context: SP.ClientContext;
public site: SP.Site;
public web: SP.Web;
public fields: SP.FieldCollection;
// Set objects
constructor() {
this.context = new SP.ClientContext();
this.site = this.context.get_site();
this.web = this.site.get_rootWeb();
this.fields = this.web.get_fields();
}
// Retrieves all fields from site collection
public GetFields() {
let availFields = this.fields;
this.context.load(availFields);
this.context.executeQueryAsync(
function () {
let siteColumns = availFields.getEnumerator();
while (siteColumns.moveNext()) {
let siteColumn = siteColumns.get_current();
console.log(siteColumn.get_title());
}
console.log("Total Fields Available: " + availFields.get_count());
},
function (sender, args) {
console.log(args.get_message());
}
);
}
// Retrieves particular field
public GetField(columnName: string) {
let availField = this.fields.getByTitle(columnName);
this.context.load(availField);
this.context.executeQueryAsync(
function () {
console.log(availField.get_id());
console.log(availField.get_description());
console.log(availField.get_defaultValue());
console.log(availField.get_group());
console.log(availField.get_scope());
},
function (sender, args) {
console.log(args.get_message());
}
);
}
;
// Creates a field
public CreateField(columnName: string) {
let newField = this.context.castTo(this.fields.addFieldAsXml('<Field Type="Text" DisplayName="' + columnName + '" Name="' + columnName+'" />',
true, SP.AddFieldOptions.addToDefaultContentType),
SP.FieldText);
this.context.load(newField);
this.context.executeQueryAsync(
function () {
console.log("Column Created");
},
function (sender, args) {
console.log(args.get_message());
}
);
}
// Deletes a field
public DeleteField(columnName: string) {
let existingColumn = this.fields.getByTitle(columnName);
existingColumn.deleteObject();
this.context.executeQueryAsync(
function () {
console.log("Column Deleted");
},
function (sender, args) {
console.log(args.get_message());
}
);
}
}
// Variables required for list operations
class SPListFieldOperations extends SPFieldOperations {
// Variables or Objects
public lists: SP.ListCollection;
public list: SP.List;
public listFields: SP.FieldCollection;
// Set objects
constructor(listName: string) {
super();
this.lists = this.web.get_lists();
this.list = this.lists.getByTitle(listName);
this.fields = this.list.get_fields();
}
}

Execution

The classes are instantiated with the help of the objects. Context of the site is set, using the constructors. The code snippet, mentioned below, triggers the members defined inside the classes. The comments are provided along with the function calls to explain every step in detail.

// 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 siteFieldsOps = new SPFieldOperations();
// Uncomment necessary operations
//siteFieldsOps.GetFields(); // Retrieves all fields from site
//siteFieldsOps.GetField('TestSiteColumn'); // Retrieves required field from site
//siteFieldsOps.CreateField('TestSiteColumn'); // Creates a field on a site
//siteFieldsOps.DeleteField('TestSiteColumn'); // Deletes a field on a site
let listFieldsOps = new SPListFieldOperations("TestList");
// Uncomment necessary operations
//listFieldsOps.GetFields(); // Retrieves all fields from list
//listFieldsOps.GetField('TestListColumn'); // Retrieves required field from list
//listFieldsOps.CreateField('TestListColumn'); // Creates a field on a list
//listFieldsOps.DeleteField('TestListColumn'); // Deletes a field on a list
}

Summary

Thus, you have learned about creating, retrieving, or deleting the fields or columns on the site and list, using TypeScript with an Object Oriented approach (with inheritance).