User Profile Manipulation Using PnP-Core JS

Introduction

In this article, we will see the various functions, which are available in PnP-Core Js for handling user profile operations. PnP-JS-Core library is a reusable library, developed by Microsoft and community contributors. This library is designed mainly to make common SharePoint tasks easy and spontaneous.

Please refer to the C-Sharp corner article's link, given below, which describes the basic functionality of Pnp-JS-Core.

• Introduction to simplified JavaScript library for SharePoint

Prerequisites

We need to download and use the following JS in our script.

• pnp.js

For Internet Explorer, we need two more JS files to be downloaded and included.

• fetch.js
• es6-promise.js 

Once, we have downloaded all the needed JS files, we can upload them to our SharePoint site Library like Site Assets and include them in our JavaScript.

<script type=”text/javascript” src=”/siteassets/scripts/pnp.min.js”></script>
<script>
//our code
</script>

Now, we will see the list of the functions, which are available for user profiles.

• amIFollowedBy
• amIFollowing
• getFollowedTags
• getFollowersFor
• myFollowers
• myProperties
• userProfile
• getPeopleFollowedBy
• getPropertiesFor
• trendingTags
• getUserProfilePropertyFor
• hideSuggestion
• isFollowing
• setMyProfilePic
• createPersonalSite
• createPersonalSiteEnqueueBulk
• shareAllSocialData

Now, let's see each function in detail with the sample codes.

amIFollowedBy

By using this function, we can check, whether the specified user is following me or not. The parameter passed for this function is an account name of the user.

@param loginName - The account name of the user.

The following sample code, given below will alert True/False, based on the result.

<div id="MyPropertiesDemo"></div>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
$pnp.sp.profiles.amIFollowedBy("i:0#.f|membership|[email protected]").then( function(result)
{
alert(result)
});
</script>

amIFollowing

By using this function, we can check, whether the current user is following the specified user or not. The parameter passed is an account name of the user.

@param loginName - The account name of the user.

The following sample code  will alert true/false.

<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
$pnp.sp.profiles.amIFollowing("i:0#.f|membership|[email protected]").then( function(result)
{
alert(result)
});
</script>

getFollowedTags

By using this function, we can retrieve the specified number of Tags, which are followed by the current user. Parameter passed is the count of the total number of Tags, which should be returned.

@param maxCount - The maximum number of tags to get.

Sample code, given below will retrieve the three tags, which are followed by the current user.

<div id="MyTagsDemo"></div>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript">
$pnp.sp.profiles.getFollowedTags(3).then( function(result)
{
var tagsList="";
result.forEach(function(val){
tagsList +=val+"<br\>";
});
document.getElementById("MyTagsDemo").innerHTML = tagsList;
});
</script>

Figure : Output of getFollowedTags function

 

getFollowersFor

By using this function, we can get the people who are following the specified user. The parameter passed is the account name of the user.

@param loginName - The account name of the user.

Following sample query will fetch all the users who are following the specified user.

$pnp.sp.profiles.getFollowersFor("i:0#.f|membership|[email protected]");

 Figure : Output of getFollowerFor query

 

myFollowers

This function will return all the people, who are following the current user. No parameter is passed for this function.

Below queries will fetch all the users, who are following the current user.

$pnp.sp.profiles.myFollowers.get();

 

 Figure: Output of the myFollowers query

 

myProperties

This function will return all the properties of the current user. No Parameter is passed to this function. There are around 104 user profile properties, which can be obtained by this query inside UserProfileProperties array.

<div id="MyPropertiesDemo"></div>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript">
$pnp.sp.profiles.myProperties.get().then( function(result)
{
var properties="";
var profileProperties = result.UserProfileProperties;
var JobTitle ="";
profileProperties.forEach(function(val){
if(val.Key == "SPS-JobTitle")
{
JobTitle = val.Value;
}
});
properties ="Name: "+result.DisplayName+"<br\>"+"Email: "+result.Email+"<br\>"+"Account Name: "+result.AccountName+"<br\>"+"JobTitle: "+JobTitle;
document.getElementById("MyPropertiesDemo").innerHTML = properties;
});
</script>

 

Figure : Output of myProperties script

 

userProfile

This function provides more details about the current user profile. No parameter is needed. Following query will return more properties about the current user.

$pnp.sp.profiles.userProfile;

Figure : Output of userProfile query

 

getPeopleFollowedBy

This function will return the list of the people, which is followed by the specified user who is following. Account Name of the specified user should be passed as a parameter.

@param loginName The account name of the user.

Figure : Output of getPeopleFollowedBy query

 

getPropertiesFor

This function will return the properties of the specified user. Account Name of the user should be passed as a parameter to this function.

@param loginName The account name of the user.

Figure : Output for getPropertiesFor query

 

trendingTags

This function will return the most popular tags. No parameter is passed to this function. Using this function, we can retrieve the tags, which are displayed in the Trending Web Part. It will display both the Tag Name and UseCount of the tag.

<div id="TrendingTagsDemo"></div>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript">
$pnp.sp.profiles.trendingTags.then(function(result)
{
var res = result.Items;
var tags =””;
 res.forEach(function(val)
{
tags +=”Name:  “ +  val.Name + “ UseCount: “ + val. UseCount + “<br\”;
});
document.getElementById("TrendingTagsDemo ").innerHTML = tags;
 });
</script>

Conclusion

Thus, in this article, we saw some of the functions, which are present in the PnP-Core JS file, which are used to manipulate the user profiles. The sample code provided can be used in a Content Editor Web part or in a SharePoint Hosted App. These functions can be combined with other JavaScript functions, based on our requirements to access the user profiles.