Populate People Picker with user Line Manager

Design Dabbler
9 5 9,816

When i am developing forms for applications, i like to have as much information on the new item form as possible. Workflow can update the item after submission but I think it adds to the user experience to see important information on the form. Whether it is a unique reference number as described here: Ensure Unique Reference On New Item‌ or other information.

Another piece of important information, especially in an application that requires line manager approval is, yep, you guessed it, the line manager.

With Nintex Forms People Picker API, described in detail here: People Picker Extensions - Nintex Forms‌ we can add the line manager to the people picker control,

In my example i have an employee people picker field default to current user and a Client ID JavaScript variable name of varCurrentUser

I have a manager people picker field with a Client ID JavaScript variable name of varLineManager

Add this code to the custom JavaScript section of form settings

NWF.FormFiller.Events.RegisterAfterReady(function () {
    NWF$(document).ready(function () {

function GetLineManager() {
    //Get current user
    var currentUser = NWF$('#' + varCurrentUser).val();
    //get line manager
    var lineManager = NWF$('#' + varLineManager).val();
    //check line mananger is empty
    if (lineManager == '') {
        //remove claim
        currentUser = currentUser.replace('i:0#.w|', '');
        //remove additional semi colon
        currentUser = currentUser.replace(';', '');
        //encode user name
        currentUser = encodeURI(currentUser);
        //REST call to get the manager property of current user
        var requestUri = _spPageContextInfo.webAbsoluteUrl + '/_api/sp.userprofiles.peoplemanager/getuserprofilepropertyfor(accountname=@v,%20propertyname=\'Manager\')?@v=\'' + currentUser + '\'';
        try {
                url: requestUri,
                type: 'GET',
                headers: { 'ACCEPT': 'application/json;odata=verbose' },
                success: GetLineManagerSuccess,
                error: GetLineManagerError
        catch (err) {
            jQuery('#errorMsg').html('getListData Error: ' + err);

function GetLineManagerSuccess(data) {
    //get line manager
    var lineManager = data.d.GetUserProfilePropertyFor;
    //new people picker instance
    var lineManagerPicker = new NF.PeoplePickerApi('#' + varLineManager);
    //search for line manager
    lineManagerPicker.search(lineManager).done(function (data) {
        //add line manager to people picker field

function GetLineManagerError(sender, args) {
    $get("results").innerHTML = "Error: " + args.get_message();

This will now populate the Line Manager on the new form based on the default value of the current user.

This code can be adapted to populate a people picker value when another value is entered rather than just when the form loads.

Hope this can help someone

Automation Master
Automation Master

Thanks Paul! 

Nintex Newbie

Hi Paul

This would be exactly what I am looking for. However it doesn't work for me. I created the same fields as in your example and copied your code, but the Manager field remains empty. Any idea what I might have missed to do ?

Design Dabbler

As an update to the above which was highlighted to me by

In our environment, we inject an additional jQuery library, seperate to the native Nintex Forms library.

If you use the above code you will need to change any reference of jQuery to NWF$ and the code will work.

Canvas Initiate

Hi Paul,
This code is really useful.  But, I could use some help in tweaking it somewhat for my purposes.  I'm a javascript newbie so while I mostly understand what you did, I haven't discerned how to expand upon it or alter it to be used for a field the user entered vs. a field with a default value.

Here's what we're trying to do:

1. We have a type of request that needs to go up the chain of command, regardless of where it starts, and always end at the same position before we do the next action in the workflow.

Example 1:  Chad submits a request that must be approved by his Director and then the VP of their division before being sent on to HR.

Example 2:  Tim, Chad's subordinate, submits a request that must be approved by Chad, Chad's Director and the VP.

So, with your code I can make the current submitter of the form and their direct manager autopopulate on the form. What I can't do is expand upon your code to populate the next 2-3 levels of approvers up the management chain (all based on the CurrentUser of the form.)

I can make a workflow grab these names and populate them into the respective list columns.  But we'd like them on the form so managers can see immediately just how many approvals are needed before their request gets processed.

I also found a separate workflow solution, but that handles approvals with a For Each Loop that ends when it runs out of approvers.  I don't need to do that.  I actually need the approval chain to end after this specific VP signs off on the request. Sometimes that might mean 2 approvals are needed before the VP sees it.  Other times it might only be 1 approval.

Thoughts on how to tackle autopopulation of several steps in an approval chain?

Thanks much.
Rae Ann

Canvas Initiate

Can I ask what the solution is when using the RESPONSIVE type of form as JavaScript does not seem to be available