Common SharePoint column Operations using PnP JavaScript Library

This article helps us to learn common operations used to access or update SharePoint Columns / fields using PnP JavaScript Library

In this article, we will learn on how to use the PnP JS Core library to do CRUD operations for the SharePoint columns.

SharePoint Column also called as field, it is a simplified object in SharePoint used for categorizing the document or items in lists or libraries respectively across SharePoint to manage them in easier manner.
We can have a column to be shared between different lists called Site Column and also have a unique column only for specific list called List Column.

PnP JavaScript Library provides number of properties to access the SharePoint objects and methods to do Read Write operations to the SharePoint Objects. This library uses the SharePoint REST API development model to do all sort of SharePoint interactions. So this library only avail for SharePoint 2013+ and SharePoint Online.

Prerequisites

Before jump in to development, we have to understand and download required files to use PnP-JS-Core library.

  • Download PnP.js PnP JS file
  • Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
  • Download es6-promise.js Used by PnP js file to handle web requests and responses (Required in IE)

Include the above files as a script reference in our code and then use the PnP code snippets.

<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
<script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
 
<div id="sample"></div>
 
<script type="text/javascript">
//PnP Code snippet
</script>

Field Collections

As we know, the columns can be accessed from two places are Site level and List Level. In a programming SharePoint Column is referred as Field object.

Get the collection of Site Columns

The following example returns the collection of Site Column objects from the SharePoint site.

//Output Format: Title - Internal Name - ID
$pnp.sp.web.fields.get().then(function(result) {
    var fieldInfo = "";
    fieldInfo += "Total Site Columns from current web: " + result.length + "<br/>";
    result.forEach(function(field) {
        fieldInfo += field.Title + " - " + field.InternalName + " - " + field.Id + "<br/>";
    });
    document.getElementById("sample").innerHTML = fieldInfo;
});

Note: pnp.sp.web.availablefield property returns the collection of site columns from the site and its parent site.

Get the collection of List Columns

The following list returns the collection of list columns from the list “Sample List”

//Column OUTPUT
//Title  -  InternalName  -  Id
$pnp.sp.web.lists.getByTitle("Training List").fields.get().then(function(result) {
    var fieldInfo = "";
    fieldInfo += "Total Site Columns from current web: " + result.length + "<br/>";
    result.forEach(function(field) {
        fieldInfo += field.Title + " - " + field.InternalName + " - " + field.Id + "<br/>";
    });
    document.getElementById("sample").innerHTML = fieldInfo;
});

CRUD Operations

Now we will use different properties and methods to do create, read, update and delete columns in SharePoint with an example.

Create Field

The following example will create a new “Single Line of Text” site column with the display name “My PnP TextField” under group “PnP Columns”

var fieldXML = "<Field DisplayName='My PnP TextField' Type='Text' Required='FALSE' Name='mypnpfield' Group='PnP Columns' />";
 
$pnp.sp.web.fields.createFieldAsXml(fieldXML).then(function(result) {
    document.getElementById("sample").innerHTML = "Created Field ID: " + result.data.Id;
});

The following example will create a new “Single Line of Text” list column under list “Training List” with the display name as “My PnP TextField”.

var fieldXML = "<Field DisplayName='My PnP TextField' Type='Text' Required='FALSE' Name='mypnpfield' />";
 
$pnp.sp.web.lists.getByTitle(“Training List”).fields.createFieldAsXml(fieldXML).then(function(result) {
    document.getElementById("sample").innerHTML = "Created Field ID: " + result.data.Id;
});
Read Field

By using this PnP JavaScript library, we can get the column properties in three ways,

  1. Filter from Field Collection
  2. Get field based on ID
  3. Get field based on title

The following example returns the column object by filtering based on its title property,

$pnp.sp.web.lists.getByTitle("Training List").fields.filter("Title eq 'Created By'").get().then(function(data) {
    document.getElementById("sample").innerHTML = "ID of field '" + data[0].Title + "': " + data[0].Id;
});

The following example returns the field object based on its id,

$pnp.sp.web.lists.getByTitle("Training List").fields.getById("1df5e554-ec7e-46a6-901d-d85a3881cb18").get().then(function(data) {
    document.getElementById("sample").innerHTML = "Field Title: " + data.Title;
});

The following example returns the field object based on its title property,

$pnp.sp.web.lists.getByTitle("Training List").fields.getByTitle("Created By").get().then(function(data) {
    document.getElementById("sample").innerHTML = "ID of field '" + data.Title + "': " + data.Id;
});

Note: Get field based on internalname is yet to add to this open source library

Update Field

The following example updates the display name (from “FieldName” to “Field Name”) of the column in a list

$pnp.sp.web.lists.getByTitle("Training List").fields.getByTitle("FieldName").update({
    'Title': 'Field Name'
}).then(function(data) {
    alert('Field Updated');
});
Delete Field

The follow example removes the field from the field collection in the SharePoint List.

[code language=”javascript”]
$pnp.sp.web.lists.getByTitle("TrainingList").fields.getByTitle("Owner Name").delete().then(function(data) {
alert("Field deleted successfully!");
});
[/code]

References:
Shantha Kumar
Shantha Kumar
Articles: 280

Related Posts