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.
  1. public context: SP.ClientContext;
  2. public site: SP.Site;
  3. public web: SP.Web;
  4. 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.
  1. public lists: SP.ListCollection;
  2. public list: SP.List;
  3. 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.
  1. constructor() {
  2. this.context = new SP.ClientContext();
  3. this.site = this.context.get_site();
  4. this.web = this.site.get_rootWeb();
  5. this.fields = this.web.get_fields();
  6. }
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.
  1. constructor(listName: string) {
  2. super();
  3. this.lists = this.web.get_lists();
  4. this.list = this.lists.getByTitle(listName);
  5. this.fields = this.list.get_fields();
  6. }
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.
  1. // Variables and functions related to site
  2. class SPFieldOperations {
  3. // Variables or Objects
  4. public context: SP.ClientContext;
  5. public site: SP.Site;
  6. public web: SP.Web;
  7. public fields: SP.FieldCollection;
  9. // Set objects
  10. constructor() {
  11. this.context = new SP.ClientContext();
  12. this.site = this.context.get_site();
  13. this.web = this.site.get_rootWeb();
  14. this.fields = this.web.get_fields();
  15. }
  17. // Retrieves all fields from site collection
  18. public GetFields() {
  19. let availFields = this.fields;
  20. this.context.load(availFields);
  21. this.context.executeQueryAsync(
  22. function () {
  23. let siteColumns = availFields.getEnumerator();
  25. while (siteColumns.moveNext()) {
  26. let siteColumn = siteColumns.get_current();
  27. console.log(siteColumn.get_title());
  29. }
  30. console.log("Total Fields Available: " + availFields.get_count());
  31. },
  32. function (sender, args) {
  33. console.log(args.get_message());
  34. }
  35. );
  36. }
  38. // Retrieves particular field
  39. public GetField(columnName: string) {
  40. let availField = this.fields.getByTitle(columnName);
  41. this.context.load(availField);
  42. this.context.executeQueryAsync(
  43. function () {
  44. console.log(availField.get_id());
  45. console.log(availField.get_description());
  46. console.log(availField.get_defaultValue());
  47. console.log(availField.get_group());
  48. console.log(availField.get_scope());
  49. },
  50. function (sender, args) {
  51. console.log(args.get_message());
  52. }
  53. );
  54. }
  55. ;
  56. // Creates a field
  57. public CreateField(columnName: string) {
  58. let newField = this.context.castTo(this.fields.addFieldAsXml('<Field Type="Text" DisplayName="' + columnName + '" Name="' + columnName+'" />',
  59. true, SP.AddFieldOptions.addToDefaultContentType),
  60. SP.FieldText);
  61. this.context.load(newField);
  62. this.context.executeQueryAsync(
  63. function () {
  64. console.log("Column Created");
  65. },
  66. function (sender, args) {
  67. console.log(args.get_message());
  68. }
  69. );
  70. }
  72. // Deletes a field
  73. public DeleteField(columnName: string) {
  74. let existingColumn = this.fields.getByTitle(columnName);
  75. existingColumn.deleteObject();
  76. this.context.executeQueryAsync(
  77. function () {
  78. console.log("Column Deleted");
  79. },
  80. function (sender, args) {
  81. console.log(args.get_message());
  82. }
  83. );
  84. }
  85. }
  87. // Variables required for list operations
  88. class SPListFieldOperations extends SPFieldOperations {
  89. // Variables or Objects
  90. public lists: SP.ListCollection;
  91. public list: SP.List;
  92. public listFields: SP.FieldCollection;
  94. // Set objects
  95. constructor(listName: string) {
  96. super();
  97. this.lists = this.web.get_lists();
  98. this.list = this.lists.getByTitle(listName);
  99. this.fields = this.list.get_fields();
  100. }
  101. }
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.
  1. // Loads necessary files
  2. $(document).ready(function () {
  3. SP.SOD.executeOrDelayUntilScriptLoaded(function () {
  4. SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');
  5. }, 'SP.RunTime.js');
  7. });
  9. // Instantiate object and call the methods
  10. function GetData() {
  11. let siteFieldsOps = new SPFieldOperations();
  12. // Uncomment necessary operations
  13. //siteFieldsOps.GetFields(); // Retrieves all fields from site
  14. //siteFieldsOps.GetField('TestSiteColumn'); // Retrieves required field from site
  15. //siteFieldsOps.CreateField('TestSiteColumn'); // Creates a field on a site
  16. //siteFieldsOps.DeleteField('TestSiteColumn'); // Deletes a field on a site
  18. let listFieldsOps = new SPListFieldOperations("TestList");
  19. // Uncomment necessary operations
  20. //listFieldsOps.GetFields(); // Retrieves all fields from list
  21. //listFieldsOps.GetField('TestListColumn'); // Retrieves required field from list
  22. //listFieldsOps.CreateField('TestListColumn'); // Creates a field on a list
  23. //listFieldsOps.DeleteField('TestListColumn'); // Deletes a field on a list
  24. }
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).