PnP-JS-Core library contains the number of extensible methods and properties. By using that we can achieve the various actions in a simple code. To know more about this library component, visit the below links,

Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

In this post, I’ll explain on how to get all theĀ field values from SharePoint list item using PnP JavaScript Library. We have three properties to retrieve the field values from list item. Those are listed below,

In HTML format:

The below syntax used to return the given SharePoint List Item’s field values in a HTML representation
Syntax:

$pnp.sp.web.lists.getByTitle('ListTitle').items.getById(1).fieldValuesAsHTML.get().then(function(data) {
    //Success Message
});

Example:
The below example displays all the field values in a html format in a developer console for the retrieved list item from SharePoint list “TestList”. This list has three user editable fields “Title, MyLookup and URL”.


$pnp.sp.web.lists.getByTitle('TestList').items.getById(1).fieldValuesAsHTML.get().then(function(data) {
    //Populate all field values for the List Item
    for (var k in data) {
        console.log(k + " - " + data[k]);
    }
});

Output:

FieldValueAsHTML

Fig 1: FieldValueAsHTML

In Text format:

The below syntax used to return the specified SharePoint ListItem’s field values in a Text representation.
Syntax:

$pnp.sp.web.lists.getByTitle('ListTitle').items.getById(1).fieldValuesAsText.get().then(function(data) {
    //Success Message
});

Example:
The below example displays all the field values in a text format in a developer console for the retrieved list item from SharePoint list “TestList”. This list has three user editable fields “Title, MyLookup and URL”


$pnp.sp.web.lists.getByTitle('TestList').items.getById(1).fieldValuesAsText.get().then(function(data) {
    //Populate all field values for the List Item
    for (var k in data) {
        console.log(k + " - " + data[k]);
    }
});

Output:

FieldValueAsText

Fig 2: FieldValueAsText

In Edit mode format:

The below syntax used to return the specified SharePoint ListItem’s field values as a format use in edit controls.
Syntax:

$pnp.sp.web.lists.getByTitle('ListTitle').items.getById(1).fieldValuesForEdit.get().then(function(data) {
    //Success Message
});

Example:
The below example displays all the field values in a format (which is used in edit controls) in a developer console for the retrieved list item from SharePoint list “TestList”. This list has three user editable fields “Title, MyLookup and URL”


$pnp.sp.web.lists.getByTitle('TestList').items.getById(1).fieldValuesForEdit.get().then(function(data) {
    //Populate all field values for the List Item
    for (var k in data) {
        console.log(k + " - " + data[k]);
    }
});

Output:

FieldValueForEdit

FieldValueForEdit

By looking in to the output images in each format explains the differences in retrieving the result.

    • In HTML format
      Author, Editor field returns the user name with link in html string.
    • In Text format
      The same Author, Editor field returns only the user name.
    • In Edit control format
      The values retrieved as same as text format representation.