Use client-side people picker in New/Edit form

Question

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.

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.

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?

Answer 1

Your client side people picker is not related to the list, in order to put the value from client side people picker to the list column [AssignedTo], try to put a content editor webpart in the new/edit form with a javascript, in the javascript try using micirsoft's PreSaveAction method, in that method get the value from your client side people picker and assign it to the list column [AssignedTo] (make your default AssignedTo column to be hidden in the form).

PreSaveAction() - When submit button is pressed in newform.aspx or editform.aspx of a SharePoint list item, a javascript function “PreSaveAction()” function is called. By default this function returns true which enables the SharePoint to Save/Update the details of the item.

However, this function can be explicitly written by method overriding as seen in the sample below by editing the forms (newform.aspx/editform.aspx) in SharePoint Designer. This can be useful in checking form data/validations.

<script type="text/javascript">
 var j = jQuery.noConflict(); 
 function PreSaveAction(){
  j(":input[title='AssignedTo']").val("value from the Client side people picker");
     //code to set value for the AssignedTo column
 }
</script>

Answer 2

what Karthik is trying to say is detailed on the blog below. https://pagialandsharepoint.wordpress.com/2016/11/02/using-client-side-people-picker-control-and-sharepoint-designer-2013-custom-forms/