SharePoint  

Advanced SharePoint User Profiles with PnPjs in SPFx

Managing user profiles in SharePoint Online is more than just fetching or updating properties like Department or JobTitle . Modern SPFx solutions often need deep integration with SharePoint’s social features, follow APIs, and people search . With PnPjs v3, you can access advanced profile endpoints to power personalized experiences, recommendations, and collaboration scenarios.

In this article, we’ll explore the advanced APIs available in @pnp/sp/profiles .

Set up in SPFx

Make sure you have the latest PnPjs installed:

  
    npm install @pnp/sp @pnp/sp/profiles @pnp/logging @pnp/queryable @pnp/core

Configure PnPjs in your SPFx component:

  
    import { spfi } from "@pnp/sp";
import { SPFx } from "@pnp/sp";
import "@pnp/sp/profiles";

const sp = spfi().using(SPFx(this.context));

Trending Documents for a User

  
    const trendingDocs = await sp.profiles.trendingDocuments(); 
trendingDocs.forEach(doc => { console.log(doc.Title, doc.Url); });

  • Great for personalized dashboards that show what colleagues are working on.

User People Suggestions

  
    const suggestions = await sp.profiles.getPeopleFollowedBy("[email protected]");
suggestions.forEach(person => { console.log(person.DisplayName, person.Email); });

  • Helps implement “You may also know” features.

User’s Followers & Following

  
    const followers = await sp.profiles.myFollowers(); 
const following = await sp.profiles.peopleFollowedByMe(); 
console.log("Followers:", followers.length); console.log("Following:", following.length);

  • Enables social graph insights.

People Recommendations

  
    const recommendations = await sp.profiles.peopleRecommendations(); 
recommendations.forEach(r => { console.log(r.DisplayName, r.JobTitle); });

  • Useful for network expansion features.

Profile Image Retrieval

  
    const photoUrl = await sp.profiles.getUserProfilePicture("[email protected]");
console.log(photoUrl); // Returns image blob URL

  • Enables custom profile cards in SPFx web parts

Search for People Across the Tenant

  
    const results = await sp.profiles.clientPeoplePickerSearchUser({ 
    QueryString: "John", 
    MaximumEntitySuggestions: 10,
    PrincipalType: 1, // Users only 
}); 
console.log("People Search:", results);

👉 Perfect for building custom people pickers in forms or organization directories.

Best Practices

  1. ✅ Cache results (session/local storage) to reduce Graph/SharePoint calls.

  2. ✅ Respect privacy — don’t over-expose profile properties.

  3. ✅ Use lazy-loading for large profile requests.

  4. ✅ Combine with Microsoft Graph for richer org data.

Conclusion

With @pnp/sp/profiles, you can go far beyond basic profile property reads/updates. From social insights (followers, colleagues, trending docs) to personalized recommendations, these APIs enable rich, user-centered SPFx solutions that drive collaboration.

Membership not found