Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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; }

share|improve this question

2 Answers 2

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:

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
share|improve this answer

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/

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

share|improve this answer
    
Thanks Aanchal but I dont know how to relate them to my problem. –  user3557593 Jun 16 at 17:52
    
When your administrator selects user in people picker, you can use these events to fill other fields. –  Aanchal Jun 16 at 17:56
    
I added the code I'm using to place in the CEWP on the newform.aspx page. Could you find the mistake. Thanks. –  user3557593 Jun 16 at 18:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.