SharePoint Basic Site Field Operations Using TypeScript

Introduction

In this article, you will learn how to perform basic site field operations (site scoped columns) on SharePoint site collections, using TypeScript, with the help of classes and variables. You will see how to create, retrieve, update, and delete the site fields with the help of an Object Oriented approach.

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

SharePoint Programming With TypeScript - Part one

In my other article, I have 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 using ECMA script, with the help of TypeScript and Object Oriented programming concepts.

Class

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

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.

// Variables or Objects
public context: SP.ClientContext;
public site: SP.Site;
public web: SP.Web;
public fields: SP.FieldCollection;

Constructor

The constructor can be defined with no parameters or with parameters, depending on the requirement. 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 constructor are context, site, root web and fields collection.

// 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();
}

Functions

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

Retrieve Fields
The fields available in the site collection are retrieved. The field collection is retrieved with the help of context and root web object. The field collection object query needs to be loaded and executed using the context to get the results.
Retrieve Field
The field from the root object is retrieved using the field title or name. After retrieving all the fields using the above operation, the particular field is accessed using the getbytitle method. Then the query will be executed. The input parameter is field title.
Create Field
The field can be created on the site collection with the help of field XML and necessary content type information. The below sample shows creating a text field.
Delete Field
The field to be deleted needs to be retrieved using the above retrieval operation. Then 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 the class.

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());
}
},
function (sender, args) {
console.log(args.get_message());
}
);
}
// Retrieves particular field
public GetField() {
let availField = this.fields.getByTitle("Title");
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() {
let newField = this.context.castTo(this.fields.addFieldAsXml('<Field Type="Text" DisplayName="CustomColumn1" Name="CustomColumn1" />',
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() {
let existingColumn = this.fields.getByTitle("CustomColumn1");
existingColumn.deleteObject();
this.context.executeQueryAsync(
function () {
console.log("Column Deleted");
},
function (sender, args) {
console.log(args.get_message());
}
);
}
}

Execution

The classes are instantiated with the help of 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 fieldsOps = new SPFieldOperations();
// Uncomment necessary operations
//fieldsOps.GetFields(); // Retrieves single field
//fieldsOps.GetField(); // Retrieves required field
//fieldsOps.CreateField(); // Creates a field
//fieldsOps.DeleteField(); // Deletes a field
}

Summary

Thus, you have learned about creating, retrieving, or deleting the fields or columns on the site collection using TypeScript with an Object Oriented approach.