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.
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.
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.
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.
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.
-
- class SPFieldOperations {
-
- public context: SP.ClientContext;
- public site: SP.Site;
- public web: SP.Web;
- public fields: SP.FieldCollection;
-
-
- constructor() {
- this.context = new SP.ClientContext();
- this.site = this.context.get_site();
- this.web = this.site.get_rootWeb();
- this.fields = this.web.get_fields();
- }
-
-
- 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());
- }
- );
- }
-
-
- 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());
- }
- );
- }
- ;
-
- 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());
- }
- );
- }
-
-
- 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());
- }
- );
- }
- }
-
-
- class SPListFieldOperations extends SPFieldOperations {
-
- public lists: SP.ListCollection;
- public list: SP.List;
- public listFields: SP.FieldCollection;
-
-
- 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.
-
- $(document).ready(function () {
- SP.SOD.executeOrDelayUntilScriptLoaded(function () {
- SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');
- }, 'SP.RunTime.js');
-
- });
-
-
- function GetData() {
- let siteFieldsOps = new SPFieldOperations();
-
-
-
-
-
-
- let listFieldsOps = new SPListFieldOperations("TestList");
-
-
-
-
-
- }
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).