Populate User Properties in list form using JavaScript in Sharepoint 2013

Question

I have a list where Administrator adds users and it contains information of the users(Employee Name, First Name, Last Name, Email etc). Employee Name is a people picker control and I need to populate the rest of the fields in form when administrator selects a person in the people picker field.

I was able to populate these fields for current user but failed in doing so for the user selected in people picker field. I am using SP 2013 and I have no access to infopath and so Javascript is my only option.

Thanks for reading and any suggestions are welcome.

 


function GetPeople(){
var personField = "Employee";  // this must match the display name of the people picker field
var assigned; // value from people picker field
var userEmail; // stores the assigned's email
var workPhone; // stores assigned's work phone
var acctName; // stores the login

// Get people picker value
assigned = $().SPServices.SPFindPeoplePicker({ 
    peoplePickerDisplayName: personField,
    checkNames: true
});
// intiate check names - don't have to do another timeout here as we should already
// have proper values here, simply doing it again as a secondary check
assigned.checkNames.click();
// get the users email from the SPFindPeoplePicker dictionary
acctName = assigned.dictionaryEntries[0].AccountName;

// Get user information
$().SPServices({
    operation: "GetUserProfileByName",
    async: false,
    AccountName: acctName,
    completefunc: function (xData, Status) {
        workPhone = getUPValue(xData.responseXML, "WorkPhone");
    }
});
// fill out the text boxes with information
getField('input','Contact Email').value = userEmail;
getField('input','Contact Phone').value = workPhone;
}
// gets the value of the called profile field
function getUPValue(x, p) {
var thisValue = $(x).SPFilterNode("PropertyData").filter(function() {
    return $(this).find("Name").text() == p;
}).find("Values").text();
return thisValue;
}

Answer 1

Since you are using SharePoint 2013 I would recommend to consider the following approach. It is based on SharePoint 2013 Client-Side-Rendering (CSR) technique that was introduced in SharePoint 2013, you could refer this article as an introduction to CSR.

Key points of solution:

• ClientPeoplePicker.OnUserResolvedClientScript property is used for specifying event handler that will be triggered after resolved user is added or removed in People Picker control

Assume the following example, given a Tasks list, when a new task is assigned, the additional properties of Task form have to be populated as well.

Below is provided the example that demonstrates how to:

• add an event handler for User field named AssignedTo. It will be triggered after resolved user is added or removed in People picker control
• set another field values in form

JavaScript template file (TaskForm.js)

(function () {

     function renderPeoplePickerTemplate(renderCtx) {
       var fieldCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(renderCtx);
       //1. Add event handler for People Picker control 
       fieldCtx.fieldSchema.OnUserResolvedClientScript = function(topLevelElementId,usersInfo){
          populateTaskFields(renderCtx,usersInfo);
       };
       var renderTemplate = SPClientPeoplePickerCSRTemplate(renderCtx); 
       return renderTemplate;

    }



     function populateTaskFields(renderCtx,usersInfo)
     {
        if(usersInfo.length == 0)
            return;

        var userKey = usersInfo[0].Key; 
        //2. Retrieving an additional data like user profile properties goes here 
        //...
        //3. Set fields values  
        setFieldControlValue('Title','Task');         
     }   


    function setFieldControlValue(fieldName,fieldValue)
    {
      var fieldControl = $('[id ^=' + fieldName + '][id $=Field]');
      fieldControl.val(fieldValue);
    }    



    function registerFormRenderer()
    {
      var formContext = {};
      formContext.Templates = {};
      formContext.Templates.Fields = {
        "AssignedTo": {
            "NewForm": renderPeoplePickerTemplate
        }
      };

      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(formContext);
    } 
    ExecuteOrDelayUntilScriptLoaded(registerFormRenderer, 'clienttemplates.js');

})();

How to apply changes

Set the JSLink property for a XLV Web Part in New Form (NewForm.aspx) page.

Steps:

• Upload JavaScript template file into Site Assets library
• Open the NewForm.aspx page in edit mode, then go to XLV web part properties. Under Advanced specify JavaScript template file location in JS Link property: ~sitecollection/SiteAssets/TaskForm.js

Answer 2

There is a global function that gets invoked named "EntityEditorCallback". If you want to have your own code run after that function is complete, you can override the function so that your own events get run after it. Note this function runs after the people picker has resolved value of the field to an actual sharepoint user.

You can check the similar issue here:

http://blog.vgrem.com/2013/03/27/different-ways-of-extending-people-editor-in-the-client-side-sharepoint-2010/

https://stackoverflow.com/questions/7328016/i-need-jquery-to-fire-when-people-picker-returns-the-value-to-the-main-form-from