How to get SharePoint person or group field using JavaScript (jsom)

Here in this SharePoint tutorial, We will discuss how to retrieve the People Picker Value using (JavaScript object model) JSOM in SharePoint online, SharePoint 2013 or SharePoint 2016.

Here we will also discuss how to retrieve the display name, email id and login name from a person or group list field in SharePoint Online or SharePoint 2013/2016 using jsom SharePoint.

SharePoint Online tutorial contents:

• What is People Picker in SharePoint Site?

• Retrieve display name and email from a person or group list field in SharePoint

• Retrieve the People Picker value in SharePoint Site

What is People Picker in SharePoint Site?

In the SharePoint Site, People picker control is used for selecting the valid User account of a person or a Group those who are present in the Organization.

Retrieve display name and email from a person or group list field in SharePoint

Now, we will see how we can retrieve the display name, email id and login name from the person or group list field in SharePoint Online or SharePoint 2013/2016.

Below is the jsom code which you can insert inside a script editor web part in a web part page in SharePoint.

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(getItemFromList, "sp.js");
function getItemFromList(){
var clientContext = new SP.ClientContext();
var item = clientContext.get_web().get_lists().getByTitle("Tasks").getItemById(5);
clientContext.load(item);
clientContext.executeQueryAsync(
function(){
var assigned = item.get_item("AssignedTo");
if(assigned.length>0){
var user = clientContext.get_web().ensureUser(assigned[0].get_lookupValue());
clientContext.load(user);
clientContext.executeQueryAsync(
function(){
alert(user.get_email());
alert(user.get_loginName());
alert(user.get_title());
},function(sender,args){ // on error
alert(args.get_message());
}
);
}
},
function(sender,args){
alert(args.get_message());
}
);
}
</script>

Retrieve the People Picker value in SharePoint Site

Here in this SharePoint Site, I will discuss how to retrieve the people picker control value by using JSOM. You can follow the below steps.

Step-1:-

First of all, I have created a SharePoint List named “Latest Blog”. In that List, I have added a column named “Created By” which is especially a People Picker column like below screenshot.

get user details from person or group field using rest api

Step-2:-

Here in this below screenshot, It is the fully JSOM Code which is used for retrieving the People picker value or column(Created By) from the specific list(“LatestBlog”).

So here first of all, By using the “retrieveLatestBlogs” function, I have retrieved the “List Title”. Then by using the “camlQuery”, I have retrieved the specific item whatever I want from that list.

After that, Within the success method[success()], I have used “While” loop and there I have created a variable named as “mytable”. After that I have retrieved the People Picker column from the List as “Author”(Internal name of Created By column), then I used lookup value function.

The JSOM code for retrieving the people picker column is given below-

<p class=\'BlogCreated\'>By:" + oListItem.get_item('Author').get_lookupValue() + "</p>";

Here in this code, I have taken a class as “BlogCreated” which is used for CSS style sheet. Then I have retrieved the People Picker Control value by using .get_lookupValue().

how to retrieve the people picker value using jsom in sharepoint

how to get lookup field values in SharePoint using jquery

Conclusion

Hence in this SharePoint tutorial, We discussed how to retrieve the People Picker Value using JSOM (javascript object model) in SharePoint 2016, SharePoint Online or SharePoint 2013.

We saw how we can retrieve display Name and email from a person or group list field in SharePoint.

Source: Paper.li