PnPjs, the popular JavaScript library for interacting with SharePoint and Microsoft 365, provides a powerful set of capabilities for developers. One common requirement when working with SharePoint lists is expanding the People/Group field to retrieve additional information about the users or groups associated with the field. In this blog post, we will explore how to expand the People/Group field in PnPjs and leverage its full potential.

1. Understanding the People/Group Field:
   Before diving into the expansion process, let's take a moment to understand the People/Group field. In SharePoint, this field allows users to select one or more users or groups from the Active Directory. The field stores user or group identities as an array of user/group objects, each containing properties like ID, Title, and Email.
2. Retrieving Basic People/Group Field Information:
   To retrieve basic information about the People/Group field, such as the user or group IDs, you can use the standard PnPjs syntax:

import { sp } from "@pnp/sp";
sp.web.lists.getByTitle("ListName").items.getById(itemId).select("PeopleField/Id,PeopleField/Title,PeopleField/EMail").expand("PeopleField").get().then((item) => {
    const peopleField = item.PeopleField; // Retrieve the expanded People/Group field
    // Access additional properties like Title, EMail, etc.
}).catch((error) => {
    console.log(error);
});

Dealing with Multiple People/Group Fields:

If your list contains multiple People/Group fields, you can expand each field separately by modifying the select and expand statements accordingly:

sp.web.lists.getByTitle("ListName").items.getById(itemId).select("Field1/Id,Field1/Title,Field1/EMail,Field2/Id,Field2/Title,Field2/EMail").expand("Field1,Field2").get().then((item) => {
    const field1 = item.Field1; // Retrieve expanded Field1
    const field2 = item.Field2; // Retrieve expanded Field2
    // Process the data from each field as required
}).catch((error) => {
    console.log(error);
});

Filtering Expanded People/Group Fields:

In some cases, you may need to filter the expanded People/Group field based on certain criteria. PnPjs allows you to apply filters using the filter method. Here's an example of filtering based on a specific user ID:

sp.web.lists.getByTitle("ListName").items.getById(itemId).select("PeopleField/Id,PeopleField/Title").expand("PeopleField").filter(`PeopleField/Id eq ${userId}`).get().then((item) => {
    const filteredPeopleField = item.PeopleField; // Retrieve the filtered People/Group field
    // Process the filtered data as required
}).catch((error) => {
    console.log(error);
});

List of Names you can expand.

Title, Name, EMail, MobilePhone, SipAddress, Department, JobTitle, FirstName, LastName, WorkPhone, UserName, Office, ID, Modified, Created, ImnName, NameWithPicture, NameWithPictureAndDetails, ContentTypeDisp.

Conclusion:

Expanding the People/Group field in PnPjs opens up a world of possibilities for working with SharePoint lists. By retrieving additional information about users or groups, you can enhance your application's functionality and provide a more personalized experience. In this blog post, we explored the process of expanding People/Group fields in PnPjs, covering basic retrieval, field expansion, handling multiple fields, and filtering. Armed with this knowledge, you can now leverage the full potential of People/Group fields in your SharePoint projects. Happy coding!