Getting Started With SharePoint Basic Field Operations Using TypeScript With Inheritance

Updated: Mar 29, 2019

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.

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.

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

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 FieldsThe 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 FieldThe 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 FieldThe 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 FieldThe 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).

Recent Posts

See All