Search This Blog

Monday, September 4, 2017

People Picker get user name using Rest API



//Content editor code


<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">


//RestPeoplePicker.js


//this function get the user details from current user id
$(document).ready(function()
{
$("#txtUser").autocomplete({
source: search,
minLength: 2
});

});

//Below Function will search the users while typing 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,
'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}
}));
}
},
'error':function (err) {
alert("search:"+JSON.stringify(err));
}
});
}

You can also get different properties like Key,Description,Etc instead of DisplayText

No comments:

Post a Comment