How to Get Manager Name based on employee Name in SharePoint Online

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.

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

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

get manager name using Client People Picker in SharePoint Online

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

get manager name in sharepoint using rest api

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

The below is the full code to populate the 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([email protected],propertyName='Manager')[email protected]='"+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

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

You may like the following SharePoint tutorials:

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

This is how to get manager name in SharePoint Online using JavaScript.

Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ 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).