Kwizcom Forms

Get Manager Name based on employee Name using Client People Picker in SharePoint Online

get manager name in sharepoint using client side people picker control

This SharePoint Online tutorial explains, how to get the manager name based on selecting employee name using people client picker in SharePoint Online.

We will use here JavaScript and rest api to get the manager name based on employee name using client people picker in SharePoint Online.

SharePoint deveopment training course

Get Manager Name based on employee Name using Client People Picker in SharePoint Online

Step 1: Login to the SharePoint site -> Create a custom list as per below screenshot.

get manager name using Client People Picker in SharePoint Online
get manager name using Client People Picker in SharePoint Online

Step 2 : Next click on Add Item to redirect New Item.aspx and that should be same as below screenshot.

get manager name in sharepoint using rest api
get manager name in sharepoint using rest api

Step 3: In the above image , we have a Employee Name field which is mandatory field to users. When user enter any name of the users the correspond manager name will populate automatically in Manager field.

The below is the full code to populate manager field based on employee Name in button click event.

<html>
<head>
<link href="https://pikasha12.sharepoint.com/sites/DLH/Documents/CustomStyle.css">
<link href="https://pikasha12.sharepoint.com/sites/DLH/Documents/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/_layouts/15/sp.UserProfiles.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>

<body>
	<div style="float:right;margin-top:0px;display:none" id="searchDiv">
       <button type="button" class="btn btn-danger" style="height: 25px;padding: 0px;" type="button" id="searchDiv" value="Populate Manager" >
    		<i  class="fas fa-search"></i>
		</button>
	</div>

</body>
</html>

<script>
$(document).ready(function () {    
    $("div[title='Manager']").css("width", "300");
    var attach = $("div[title='Manager']").closest("td");
    $("#searchDiv").detach().prependTo(attach);
    $("#searchDiv").show();


    $("#searchDiv").click(function () {
       getManager();    
    });


}); /// end of doc ready


function getManager() {	
    var pickerDivId = $("div[title='Employee Name']").attr('id');
    var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDivId];
    var theUser = peoplePicker.GetAllUserInfo();
    console.log(theUser);    
    if (theUser[0]) {
        var theUserId = theUser[0].Key;
        console.log(theUserId);
        getProfile(theUserId).done(function(data){
			var manager=data.d.GetUserProfilePropertyFor;
			if(manager!=""){
				var fieldName="Manager";
				SetAndResolvePeoplePicker(fieldName,manager);
			}			
		});
    } else {
        alert("Please Enter Employee Name");
    }
}

function getProfile(accountName) {
    return $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor(accountName=@v,propertyName='Manager')?@v='"+encodeURIComponent(accountName)+"'",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        }        
    });
}
function SetAndResolvePeoplePicker(fieldName,userAccountName) {
    var controlName = fieldName;
    var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + controlName + "']");
    var peoplePickerEditor = peoplePickerDiv.find("[title='" + controlName + "']");
    var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
    clearPeopleFieldValue(fieldName);
    peoplePickerEditor.val(userAccountName);
    spPeoplePicker.AddUnresolvedUserFromEditor(true);
    //disable the field
    spPeoplePicker.SetEnabledState(false);
    //hide the delete/remove use image from the people picker
    $('.sp-peoplepicker-delImage').css('display', 'none');
}

//Clears any previous values from people picker

function clearPeopleFieldValue(colName) {
	// Select the People Picker DIV
	var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + colName + "']");
	// Get the instance of the People Picker from the Dictionary
	var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
	if (spPeoplePicker) {
	var ResolvedUsersList = $(document.getElementById(spPeoplePicker.ResolvedListElementId)).find("span[class='sp-peoplepicker-userSpan']");
	$(ResolvedUsersList).each(function (index) {
	spPeoplePicker.DeleteProcessedUser(this);
	});
}
}
</script>

Step 4 : To use this code, Click on Add New Items -> Edit page -> Add a Script Editor WebPart->Paste the above code-> Save the page.

get manager name in sharepoint online using rest api
get manager name in sharepoint online using rest api

Step 5 : Next click on Add new Item -> Enter the Employee Name and click on Search button so manager name will automatically populate on manager field .

get manager name in sharepoint 2013
get manager name in sharepoint 2013

You may like following SharePoint people picker tutorials:

Note: Manager name should be updated in your user account details otherwise it will show the empty result.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 6 + years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

View all posts by Rajkiran Swain →