A Complete Guide to Getting and Setting Fields Value using PnP JS in SPFx

This article provides the complete Guide to Getting and Setting Fields value using PnP JS in SharePoint Framework (SPFx).

Install the library and required dependencies

npm install @pnp/sp --save

For PnP js selective import, refer PnP js site. I just imported below

import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/site-users/web";
import { ISiteUserProps } from "@pnp/sp/site-users/";
import "@pnp/sp/fields";

Get a list item

const list = sp.web.lists.getByTitle("GetSet");
const item: any = await list.items.getById(1).get();

Single line of text

//get value
let textvalue: string = item["Title"];
//set value 
const i = await list.items.getById(1).update({
  Title: textvalue
});

Multiple lines of text (Plain text)

//get value
let multipleLineTextValue: string = item["MultipleLinesText"];
//set value 
const i = await list.items.getById(1).update({
  MultipleLinesText: multipleLineTextValue
});

Multiple lines of text (Enhanced rich text)

//get value
let multipleLineHTMLValue: string = item["MultipleLinesHTML"];
//set value 
const i = await list.items.getById(1).update({
  MultipleLinesHTML: multipleLineHTMLValue
});

Choice (single selection)

//get value
let singleChoice: string = item["Location"];
//set value 
const i = await list.items.getById(1).update({
  Location: singleChoice
});

Choice (multiple selections)

//get value
let multiChoice: string[] = item["Locations"];
//set value 
const i = await list.items.getById(1).update({
  Locations: { results: multiChoice }
});

Number

//get value
let numvervalue: number = item["Quantity"];
//set value 
const i = await list.items.getById(1).update({
  Quantity: numvervalue
});

Currency

//get value
let currencyvalue: number = item["Cost"];
//set value 
const i = await list.items.getById(1).update({
  Cost: currencyvalue
});

Date and Time

//get value
let datevalue: Date = item["BirthDay"];
//set value 
const i = await list.items.getById(1).update({
  BirthDay: datevalue
});

Lookup (single selection)

PnP always only return id value, also we get the value from different field name, Example <Field Internal Name> + ‘Id’. So “Id” is always added in the suffix of your filed internal name

//get value
let lookupvalue: number = item["ColorId"];
//set value 
const i = await list.items.getById(1).update({
  ColorId: lookupvalue
});

Lookup (multiple selection)

//get value
let lookupvalues: number[] = item["ColorsId"];
//set value 
const i = await list.items.getById(1).update({
  ColorsId: { results: lookupvalues }
});

Yes/No

//get value
let yesnovalue: boolean = item["IsActive"];
//set value 
const i = await list.items.getById(1).update({
  IsActive: yesnovalue
});

Person or Group (single selection)

PnP always only return id value, also we get the value from different field name, Example <Field Internal Name> + ‘Id’. So “Id” is always added in the suffix of your filed internal name

//get value
let uservalue: number = item["OwnerId"];
const user: ISiteUserProps = await sp.web.getUserById(uservalue).get();
console.log(user.LoginName)
//set value 
const i = await list.items.getById(1).update({
  OwnerId: uservalue
});
//FYI...
//import { ISiteUserProps } from "@pnp/sp/site-users/";

Person or Group (multiple selection)

//get value
let usersvalue: number[] = item["OwnersId"];
//set value 
const i = await list.items.getById(1).update({
  OwnersId: { results: usersvalue }
});

Hyperlink

//get value
let linkvalue: object = item["Reference"];
const Description = linkvalue["Description"];
const Url = linkvalue["Url"];
//set value 
const i = await list.items.getById(1).update({
  Reference: {
    "__metadata": { type: "SP.FieldUrlValue" },
    Description: Description,
    Url: Url
  }
});

Picture

let linkvalue: object = item["Image"];
const Description = linkvalue["Description"];
const Url = linkvalue["Url"];
//set value 
let setvalue = JSON.stringify({
                "fileName": Description,
                "serverUrl": Url.replace(file.fileAbsoluteUrl.replace(/.*\/\/[^\/]*/, ''), ''),
                "serverRelativeUrl": Url.replace(/.*\/\/[^\/]*/, '')
            });
const i = await list.items.getById(1).update({
  Image: setvalue 
});

Managed Metadata (single selection)

//get value
let tagvalue: any = item["Tag"];
//set value 
const i = await list.items.getById(1).update({
  Tag: {
    "__metadata": { "type": "SP.Taxonomy.TaxonomyFieldValue" },
    "Label": tagvalue.Label,
    'TermGuid': tagvalue.TermGuid,
    'WssId': '-1'
  }
});

Managed Metadata (multiple selection)

//get value
let tagsvalue: any = item["Tags"];
let tagsString: string = '';
tagsvalue.forEach(function (v, i) {
  tagsString += `${v.Label}|${v.TermGuid};`;
})
//set value 
const i = await list.items.getById(1).validateUpdateListItem([{
  ErrorMessage: null,
  FieldName: "Tags",
  FieldValue: tagsString,
  HasException: false
}]);

Code can be view in the GitHub

A Complete Guide to Getting and Setting Fields Value using PnP JS in SPFx

🔗github.com

Sharing is caring!

If you have any questions, feel free to let me know in the comments section.
Happy coding!!!

Coroteroin July 29, 2020 / 5:33 pm

Can you made this post for Create operation?

In PnP SPFx Control React, the PeoplePicker provided selected people data like this:

[{
id: “i:0#.f | membership | person1@someurl.com”
imageInitials: “P1”
mageUrl: “https://someurl.com/sites/MyName/_layouts/15/userphoto.aspx?
accountname=person1%40someurl.com&size=M”
oginName: “i:0#.f | membership | person1@someurl.com”
optionalText: “”
secondaryText: “person1@someurl.com”
tertiaryText: “”
text: “Person 1”
}]

Is there any way to Create or Update an item without using Person/Group’s id?

LikeLiked by 1 person

- Ravichandran Krishnasamy July 29, 2020 / 7:58 pm
  
  Getting user id is very simple
  
  import { IWebEnsureUserResult } from “@pnp/sp/site-users/”;
  
  const result: IWebEnsureUserResult = await web.ensureUser(“i:0#.f|membership|user@domain.onmicrosoft.com”);
  
  let userid = result.data.Id;
  
  check this URL for more details
  https://pnp.github.io/pnpjs/sp/webs/#ensureuser
  
  LikeLiked by 1 person
  
  - PK February 25, 2022 / 12:41 am
    
    Hi There,
    
    EnsureUser :”Checks whether the specified login name belongs to a valid user in the web. If the user doesn’t exist, adds the user to the web”
    
    I see a problem, If you use ensureuser in your code. It will work if you are an administrator.
    
    If the logged in user is a visitor to the site – How do we allow him to add the user to the web?
    
    Any thoughts on this??
    
    LikeLike
  - Ravichandran Krishnasamy February 25, 2022 / 1:49 am
    
    At the end user entry will be added by SharePoint backend service not by current user
    
    LikeLike
ammar June 8, 2022 / 11:30 pm

thanks a lot for your effort

LikeLike