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 --saveFor 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
Sharing is caring!
If you have any questions, feel free to let me know in the comments section.
Happy coding!!!
RAVICHANDRAN BLOG 
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
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