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.
In my other article, I have explained about implementing TypeScript basic examples in SharePoint Visual Studio projects.
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.