Retrieve User's Work Phone on change of People or Group field in NewItem form using JSLink
-
17-12-2020 - |
Pergunta
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.
Solução 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());
}
}
Outras dicas
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;
}
});
});
Break up you challenge in multiple parts.
(and given your answers here on SO you can code)
get the user properties
3a. using JSOM
3b. using REST
proces returned properties
Set the WorkPhone field
WYSIWYG editing with the Cisar extension makes all this a lot easier:
https://chrome.google.com/webstore/detail/cisar/nifbdojdggkboiifaklkamfpjcmgafpo