We’re rewarding the question askers & reputations are being recalculated! Read more.
2 Updated to reflect that I now have a people picker on my form, but it is useless.
source | link

I foundUsing this documentation however it says to replace the PlaceHolderMain asp:Content tags. But we can't replace those tags. And if I try and put the code anywhere else on the editformhave mad some progress.aspx it breaks the form I added this to my master page.

<SharePoint:ScriptLink name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="sp.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="sp.core.js" runat="server" LoadAfterUI="true" Localizable="false" />

I found this thread which seems to be related, but also doesn't seem to work. When I open the edit form there is no place to add the code as a JSLink and whenAnd I add theadded this code toin a script editor the first part runs, but nothing after that.on my EditForm.aspx page

$(document).ready(function () {

    // Specify the unique ID of the DOM element where the
    // picker will render.
    initializePeoplePicker('peoplePickerDiv');
});

// Render and initialize the client-side People Picker.
function initializePeoplePicker(peoplePickerElementId) {

    // Create a schema to store picker properties, and set the properties.
    var schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = true;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';

    // Render and initialize the picker. 
    // Pass the ID of the DOM element that contains the picker, an array of initial
    // PickerEntity objects to set the picker value, and a schema that defines
    // picker properties.
    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}

// Query the picker for user information.
function getUserInfo() {

    // Get the people picker object from the page.
    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

    // Get information about all users.
    var users = peoplePicker.GetAllUserInfo();
    var userInfo = '';
    for (var i = 0; i < users.length; i++) {
        var user = users[i];
        for (var userProperty in user) { 
            userInfo += userProperty + ':  ' + user[userProperty] + '<br>';
        }
    }
    $('#resolvedUsers').html(userInfo);

    // Get user keys.
    var keys = peoplePicker.GetAllUserKeys();
    $('#userKeys').html(keys);

    // Get the first user's ID by using the login name.
    getUserId(users[0].Key);
}

// Get the user ID.
function getUserId(loginName) {
    var context = new SP.ClientContext.get_current();
    this.user = context.get_web().ensureUser(loginName);
    context.load(this.user);
    context.executeQueryAsync(
         Function.createDelegate(null, ensureUserSuccess), 
         Function.createDelegate(null, onFail)
    );
}

function ensureUserSuccess() {
    $('#userId').html(this.user.get_id());
}

function onFail(sender, args) {
    alert('Query failed. Error: ' + args.get_message());
}   

And I have found other tutorials or threads about adding thedo get a client side people picker to a pageon my form and they work in a senseit does the predictive suggestions. But they don't actually connect withSo it is working. However the people picker isn't connected to the list -- don't readitem. That is to say, it doesn't show the current value of my AssignedTo form nor does a change in the list item/don'tclient side people picker update the list item when the form is closedsaved.

I found this documentation however it says to replace the PlaceHolderMain asp:Content tags. But we can't replace those tags. And if I try and put the code anywhere else on the editform.aspx it breaks the form.

I found this thread which seems to be related, but also doesn't seem to work. When I open the edit form there is no place to add the code as a JSLink and when I add the code to a script editor the first part runs, but nothing after that.

And I have found other tutorials or threads about adding the people picker to a page and they work in a sense. But they don't actually connect with the list -- don't read the current value of the list item/don't update the item when the form is closed.

Using this documentation I have mad some progress. I added this to my master page.

<SharePoint:ScriptLink name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="sp.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="sp.core.js" runat="server" LoadAfterUI="true" Localizable="false" />

And I added this code in a script editor on my EditForm.aspx page

$(document).ready(function () {

    // Specify the unique ID of the DOM element where the
    // picker will render.
    initializePeoplePicker('peoplePickerDiv');
});

// Render and initialize the client-side People Picker.
function initializePeoplePicker(peoplePickerElementId) {

    // Create a schema to store picker properties, and set the properties.
    var schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = true;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';

    // Render and initialize the picker. 
    // Pass the ID of the DOM element that contains the picker, an array of initial
    // PickerEntity objects to set the picker value, and a schema that defines
    // picker properties.
    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}

// Query the picker for user information.
function getUserInfo() {

    // Get the people picker object from the page.
    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

    // Get information about all users.
    var users = peoplePicker.GetAllUserInfo();
    var userInfo = '';
    for (var i = 0; i < users.length; i++) {
        var user = users[i];
        for (var userProperty in user) { 
            userInfo += userProperty + ':  ' + user[userProperty] + '<br>';
        }
    }
    $('#resolvedUsers').html(userInfo);

    // Get user keys.
    var keys = peoplePicker.GetAllUserKeys();
    $('#userKeys').html(keys);

    // Get the first user's ID by using the login name.
    getUserId(users[0].Key);
}

// Get the user ID.
function getUserId(loginName) {
    var context = new SP.ClientContext.get_current();
    this.user = context.get_web().ensureUser(loginName);
    context.load(this.user);
    context.executeQueryAsync(
         Function.createDelegate(null, ensureUserSuccess), 
         Function.createDelegate(null, onFail)
    );
}

function ensureUserSuccess() {
    $('#userId').html(this.user.get_id());
}

function onFail(sender, args) {
    alert('Query failed. Error: ' + args.get_message());
}   

And I do get a client side people picker on my form and it does the predictive suggestions. So it is working. However the people picker isn't connected to the list item. That is to say, it doesn't show the value of my AssignedTo form nor does a change in the client side people picker update the list item when the form is saved.

1
source | link

Use client-side people picker in New/Edit form

We have an on-prem SP 2013. We have custom new and edit forms for some specific content types. The out of the box new/edit forms have the "good" client-side people picker, but as soon as we create custom ones the people pickers default back to the old style -- which our users hate.

I found this documentation however it says to replace the PlaceHolderMain asp:Content tags. But we can't replace those tags. And if I try and put the code anywhere else on the editform.aspx it breaks the form.

I found this thread which seems to be related, but also doesn't seem to work. When I open the edit form there is no place to add the code as a JSLink and when I add the code to a script editor the first part runs, but nothing after that.

And I have found other tutorials or threads about adding the people picker to a page and they work in a sense. But they don't actually connect with the list -- don't read the current value of the list item/don't update the item when the form is closed.

How can I add a client-side people picker to the page and make it actually work for the purpose of a new/edit form?