<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-
ui.min.css" rel="stylesheet"/>
<script src="/sites/<Site>/<Subsite>/SiteAssets/RestPeoplePicker.js"></script>
<input name="fname" id="txtUser" type="text">
<input onclick="GetValues()" type="button" value="Get UserID"/>
Code For RestPeoplePicker.js:
//Below Function change the text box into people search box
//this function get the user details from current user id
$(document).ready(function()
{
$("#txtUser").autocomplete({
source: search,
minLength: 2
});
});
//Below function return the users names based on the values typed in the text box
function search(request,response) {
//var appweburl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));
//var hostweburl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
var serverUrl = _spPageContextInfo.webAbsoluteUrl;
var restSource = serverUrl+ "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";
// var principalType = this.element[0].getAttribute('principalType');
$.ajax(
{
'url':restSource,
'method':'POST',
'data':JSON.stringify({
'queryParams':{
'__metadata':{
'type':'SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters'
},
'AllowEmailAddresses':true,
'AllowMultipleEntities':false, //if we want this is a multiple people picker then set 'true'
'AllUrlZones':false,
'MaximumEntitySuggestions':50,
'PrincipalSource':15,
'PrincipalType': 15,
'QueryString':request.term
}
}),
'headers':{
'accept':'application/json;odata=verbose',
'content-type':'application/json;odata=verbose',
'X-RequestDigest':$("#__REQUESTDIGEST").val()
},
'success':function (data) {
var d = data;
var results = JSON.parse(data.d.ClientPeoplePickerSearchUser);
if (results.length > 0) {
response($.map(results, function (item) {
return {label:item.DisplayText,value:item.DisplayText}
//return {label:item.DisplayText,value:item.Key}
//Here you can get multiple properties of users
}));
}
},
'error':function (err) {
alert("search:"+JSON.stringify(err));
}
});
}
//Below 3 functions will get the user ID based on the user name.
// in this function we will get user id & we can call the Add/Update Function
function GetValues()
{
var success = getDetailFromPPSearchUser($("#txtUser").val(),'Employee');
//here we are passing user displayname, source as any string( here 'Employee')
success.done(function(employeeresults){
$.map(employeeresults, function (employeeItem) {
//sp.js code to ensure user (this will insert user to site if not present)
var context = SP.ClientContext.get_current();
var theUser = context.get_web().ensureUser(employeeItem.Key);
context.load(theUser);
context.executeQueryAsync(function()
{
var successUserSelected = GetIDForTheSelectedUser(employeeItem.Key);
successUserSelected.done(function(UserId)
{
alert(UserId);
//Here we can call the function of ADD/Update
//addListItem('https://<SiteURL>','TestList',UserID)
});
},
function(sender, args){alert("GetValues : "+args.get_message());});
});
});
}
// this function to check the user name is in site or not
function getDetailFromPPSearchUser(inputString,source){
var deferred = $.Deferred();
var serverUrl = _spPageContextInfo.webAbsoluteUrl;
var restSource = serverUrl+ "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";
$.ajax(
{
'url':restSource,
'method':'POST',
'data':JSON.stringify({
'queryParams':{
'__metadata':{
'type':'SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters'
},
'AllowEmailAddresses':true,
'AllowMultipleEntities':false,
'AllUrlZones':false,
'MaximumEntitySuggestions':50,
'PrincipalSource':15,
'PrincipalType': 15,
'QueryString':inputString
}
}),
'headers':{
'accept':'application/json;odata=verbose',
'content-type':'application/json;odata=verbose',
'X-RequestDigest':$("#__REQUESTDIGEST").val()
},
'success':function (data) {
//$('body').removeClass('loading');
var d = data;
var results = JSON.parse(data.d.ClientPeoplePickerSearchUser);
if (results.length == 1) {
deferred.resolve(results);
}
else
{
}
},
'error':function (err) {
$('#txtshellUser').unbind("click");
if(JSON.parse(err.responseText).error.code == "-2130575252, Microsoft.SharePoint.SPException")
{
alert("Security validation of the page expired. Please refresh the page.!")
}
else
{
alert(JSON.stringify(err));
}
deferred.reject();
}
}
);
return deferred.promise();
}
/// this function Getting the ID for the selected people picker
/// username should be passed as 'domain\username'
function GetIDForTheSelectedUser(userName) {
var deferred = $.Deferred();
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
/// make an ajax call to get the site user
$.ajax({
url: siteUrl + "/_api/web/siteusers(@v)?@v='" +
encodeURIComponent(userName) + "'",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
//popup user id received from site users.
deferred.resolve(data.d.Id);
},
error: function (data) {
console.log(JSON.stringify(data));
alert(JSON.stringify(data));
deferred.reject();
}
});
return deferred.promise();
}
from the above code you can get user ID & call the Add/Update function
//Below code for ADD & Update list item (first we are getting the user id from the
above function & call this function after getting the UserID):
// Get the user ID from Login name.
addListItem('https://<SiteURL>','TestList',<UserID>)
//Code to Add new list item:
// Adding a list item with the metadata provided
function addListItem(url, listname,userid) {
alert('UserID: '+userid);
// Prepping our update
var item = $.extend({
"__metadata": { "type": "SP.Data.TestListListItem"}
}, {'Title': $('#txtTitle').val(),'TestColumn1': $('#txtTestColumn1').val(),'TestColumn2': $('#txtTestColumn2').val(),'TestColumn3Id': userid }); //If it is multi user field then instead of
'userid' we need to
use -> {"results": [userid]} OR {"results": [userid1,userid2]}
$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
alert('New item added');
},
error: function (data) {
alert('FAILED');
}
});
}
Please refer this link for more details Link 1 Link 2
.
//Code to Update list item(With single user & Multiple user field):
function addListItem(url, listname,userid) {
alert('UserID: '+userid);
var itemID = 1; //List Item ID which we are going to update
var item = $.extend({
"__metadata": { "type": "SP.Data.Workflow_x0020_TasksListItem"}
}, {'Title': $('#txtTitle').val(),'AssignedToId': {"results": [userid]}});
//Adding user to Multi user field, Here also we can give multi user like -> "results": [1,2]
//}, {'Title': $('#txtTitle').val(),'TestUserId': userid });
//Adding user to single user to single user field
$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/getItemByStringId("+itemID +")",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
//data: Sys.Serialization.JavaScriptSerializer.serialize(item),
headers: {
"Content-Type": "application/json;odata=verbose",
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-Http-Method": "PATCH", //MERGE
"IF-MATCH": "*"
},
success: function (data) {
alert('item Updated');
},
error: function (err) {
alert("Failed: " + JSON.stringify(err));
}
});
}
