Retrieve User's Work Phone on change of People or Group field in NewItem form using JSLink

Question

I have one SharePoint list in which there are two fields:

• User (People or Group)
• Work Phone (Single Line of Text)

On default NewItem form of this list, When we add User in User field then that user's Work Phone should be automatically comes in Work Phone input text on change of User field.

How to achieve this using JSLink ?

How to call onchange event on list's default people or group field and get the user details at onchange ? I have tried to get user on people or group change with following code:

// it does not calling on auto complete
$(".sp-peoplepicker-topLevel input").change(function () {
    console.log("Onchange event");        
});

Change event was called but on selecting user (on autocomplete), this event does not calling.

Answer 1

This code is working but onclick of Phone field.

1.Edit New form page.

2.Add content Editor web part & then add below code.

$(document).ready(function(){ 

$("input[title='Phone']").click(function(){
     var CurrentUserLoginName="";


     var PickerDiv = $("div[title='User']"); //User is people field.....
var PickerInstance = SPClientPeoplePicker.SPClientPeoplePickerDict[PickerDiv[0].id];
if($("div[title='User'] .ms-entity-resolved").attr("title")!=""){

CurrentUserLoginName=PickerInstance.GetAllUserInfo()[0].Key;
}

$().SPServices({
 operation : "GetUserProfileByName",
                async : false,
                AccountName : CurrentUserLoginName,
                completefunc : function (xData, Status) {                                          

  $("input[title='Phone']").attr({value: getUserProfileValueFromXML(xData.responseXML, "WorkPhone")});

                  }
            });                                

            function getUserProfileValueFromXML(responseXML, property) {
                            var thisValue = $(responseXML).SPFilterNode("PropertyData").filter(function () {
                                                            return $(this).find("Name").text() == property;
                                            }).find("Values").text();
                            return thisValue;
            }  
});
});

Answer 2

Break up you challenge in multiple parts.
(and given your answers here on SO you can code)

1. Set an onchange event on the PeoplePicker

2. get the proper username

3. get the user properties

   3a. using JSOM

   3b. using REST

4. proces returned properties

5. Set the WorkPhone field

WYSIWYG editing with the Cisar extension makes all this a lot easier:

https://chrome.google.com/webstore/detail/cisar/nifbdojdggkboiifaklkamfpjcmgafpo

Answer 3

Achieve the requirement:

I have added a JSLink file to list.

In JSLink code,

--> Created a blur event for People or Group field User

    // Get Selected user in People or Group field
    var inputP = $(".sp-peoplepicker-topLevel input");
    $(inputP).blur(function () {
        var PickerDiv = $("div[title='User']"); //User is people field.....
        var PickerInstance = SPClientPeoplePicker.SPClientPeoplePickerDict[PickerDiv[0].id];
        if ($("div[title='User'] .ms-entity-resolved").attr("title") != "") {
            userEmail = PickerInstance.GetAllUserInfo()[0].EntityData.Email;
            console.log("User Email: " + userEmail);
            getWorkPhone(); // Get the work phone by email and set to work phone field
        }
    });

--> In getWorkPhone function, retrieves the User's work phone based on Email

function getWorkPhone() {
    var clientContext = SP.ClientContext.get_current();
    var website = clientContext.get_web();
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'EMail\'/>' + '<Value Type=\'Text\'>' + userEmail + '</Value></Eq></Where></Query><RowLimit>1</RowLimit></View>'); // CAMLQuery based on Email
    var userInfoList = website.get_siteUserInfoList();
    collListItem = userInfoList.getItems(camlQuery);
    clientContext.load(website);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);

    function onRequestSucceeded() {
        var item = collListItem.itemAt(0);
        var OfficePhone = item.get_fieldValues().WorkPhone;
        console.log("Office Phone: " + OfficePhone);
        // Set Work phone to list's `Work phone` field
        $("input[title='Work phone']").attr({ value: OfficePhone }); 
    }

    function onRequestFailed(sender, args) {
        console.log('Error: ' + args.get_message());
    }
}