List/Library Field(Column) Manipulation Using PnP JS Core

PnP-JS-Core library is a reusable library, developed by Microsoft and community contributors. This library is designed mainly to make common SharePoint tasks easy and spontaneous. It contains many fluent API for working with the SharePoint REST API. Please refer to the following site to know more about the PnP-JS-Core library.

Here is a good C-Sharp corner article, which describes about the basic functionality of Pnp-JS-Core.

• Introduction to simplified JavaScript library for SharePoint

In this article, we will see the following concepts about the fields in a List/Library.

• List of properties, which can be obtained for each field.
• Add or Delete a field.
• Modify the properties of a field.

To use PnP-JS-core in our JavaScript, we need to include few JS files, which can be downloaded from the following link.

• pnp.js

If we want to make the script work in Internet Explorer, we have to additionally add two more JS files ,which can be downloaded from the following link.

• fetch.js
• es6-promise.js

Once, we have downloaded all the needed JS files, we can upload them to our SharePoint site Library like Site Assets and include them in our JavaScript.

<script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
<script>
    //our code
</script>

Details about Fields

We can retrieve all the details about the fields of a list by running the following command in the Browser console.

$pnp.sp.web.lists.getByTitle("My List").fields.get();

Properties of Field

With the command, shown above, we can get all the details about the properties of the fields also.



The list of properties, which are available for a field are as follows: 

• AutoIndexed
• CanBeDeleted
• DefaultValue
• Description
• Direction
• EnforceUniqueValues
• EntityPropertyName
• FieldTypeKind
• Filterable
• FromBaseType
• Group
• Hidden
• Id
• Indexed
• InternalName
• JSLink
• MaxLength
• ReadOnlyField
• Required
• SchemaXml
• Scope
• Sealed
• Sortable
• StaticName
• Title
• TypeAsString
• TypeDisplayName
• TypeShortDescription
• ValidationFormula
• ValidationMessage
• odata.editLink
• odata.id
• odata.type

Methods: List of avalable methods to handle the fields are as follows:

• add
• addCalculated
• addCurrency
• addDateTime
• addMultilineText
• addNumber
• addText
• addUrl
• constructor
• createFieldAsXml
• getById
• getByTitle

Add a new Field to the List

We can add the fields to the list, using script. To add a field with a single line of text, we can use the following script:

<script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
<script type="text/javascript">
    $pnp.sp.web.lists.getByTitle("My List").fields.addText('Testing Field').then(function(result) {
        alert('Field created successfully');
    });
</script>

Access a Field in the List

To access a particular field, we can either use (a) getById or (b) getByTitle methods. 

1. getById
   
   We can find the ID of a field by expanding the result set of the particular field object in the Browser console or alternatively, we can execute the script by passing the Title of the field and getting the ID.
   

   <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
   <script type="text/javascript">
       $pnp.sp.web.lists.getByTitle("My List").fields.getByTitle('Testing Field').get().then(function(result) {
           alert(result.Id)
       });
   </script>

   The following image shows the ID of the field testing field.
   
   
   
   Once we obtain the ID, we can get the details about the particular field with the following script.
   

   <script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
   <script type="text/javascript">
       $pnp.sp.web.lists.getByTitle("My List").fields.getById('2de15c93-7250-4aae-ab64-494e3efea4aa').get().then(function(result) {
           alert(result.Id + "\n" + result.Title + "\n" + result.Description + "\n" + result.Required)
       });
   </script>

2. getByTitle
   
   Alternatively, we can access a field with its Title and following is the command for it: 
   

   $pnp.sp.web.lists.getByTitle("My List").fields.getByTitle('Testing Field').get();

   The script, shown above, can be converted to use the getByTitle function.

Delete a field from the List

We can delete a field from a List by using the script, shown below:

$pnp.sp.web.lists.getByTitle("My List").fields.getById('0374823b-66d5-4b8b-919d-ee5c21e20a75').delete();

(OR)

$pnp.sp.web.lists.getByTitle("My List").fields.getByTitle('Testing Field').delete();

The script would look like, as shown below:

<script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
<script type="text/javascript">
    $pnp.sp.web.lists.getByTitle("My List").fields.getByTitle('Testing Field').delete().then(function(result) {
        alert('Field deleted successfully');
    });
</script>

Update a property of a Field in List

We can update the properties of the field by setting the value for it with the following script.

To update the Testing Field as Mandatory field ( Its required that this column contains information),

<script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
<script type="text/javascript">
    $pnp.sp.web.lists.getByTitle("My List").fields.getByTitle('Testing Field').update({
        Required: true
    }).then(function(result) {
        alert('Field Updated successfully');
    });
</script>

To update the Description of the field.

<script type=”text/javascript” src=”/siteassets/scripts/pnp.js”></script>
<script type="text/javascript">
    $pnp.sp.web.lists.getByTitle("My List").fields.getByTitle('Testing Field').update({
        Description: 'Test Description'
    }).then(function(result) {
        alert('Field Updated successfully');
    });
</script>

Conclusion

So in this article we learned the list of properties and methods to handle fields available in a List/Library. The scripts can be tested by adding them to a content editor or script editor web part. This code can be alternatively used in an Add-in also. Using the pnp-core js we can achieve most of the field manipulation actions in a List/Library through client side scripting itself.