Pull user list property from people picker and write to separate textfield

I have previously posted a solution for pulling the email address from a people picker. This is an updated version that lets you pull any user list property (this is the built in user list in SharePoint and NOT the SharePoint Server Shared Service Provider profile) from the people picker and write it to a separate text field.

Unlike the previous solution, this one is designed for multi select people pickers.

How does it work

This solution binds to the blur event on the picker input field, and on the click event on the Check Names and Browse button. It checks to see that the picker selections resolve, and then pulls the login name form the selections. It then uses the function “getUserInfo_v2” from the file “spjs-utility.js” to get the user list information for the current selection.

The function “getUserInfo_v2” may not return all fields from the user list. If you miss some fields, you can add them to the array “arrOfFields”. Go here to learn how to find the FieldInternalName of the fields

How to set it up

Go here and download the latest version of “spjs-utility.js”

Add a CEWP below the list form in NewForm or EditForm. Read here how to add a CEWP in SharePoint 2007. In SharePoint 2010 you can add the CEWP by selectiong “Form Web Parts” from the list ribbon menu.

Insert this code in it. In line 05: replace “from” and “to” with your FieldInternalNames, and the “propertyName” with the one you want to retrieve. The “multiValueSeparator” is the separator between multiple values (if the picker is a multi select).

&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/Scripts/spjs-utility.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

pullEmailFromPickerOnChange({from:'MyPeoplePicker',to:'Title',propertyName:'Title',multiValueSeparator:'; '});

/******************************************************
		Do not change anything below this line
*******************************************************/
fields = init_fields_v2();
function pullEmailFromPickerOnChange(obj){
	var toFind, arr, data, val;
	$(document).ready(function(){
		toFind = &quot;div.ms-inputuserfield&quot;;
		if(!browseris.ie5up &amp;&amp; typeof(_fV4UI)==='undefined'){
			toFind = &quot;textarea&quot;;
		}
		$(fields[obj.from]).find(toFind).bind('blur',function(){
			$(fields[obj.to]).find('input').val('');
			arr = pullUserInfoFromPicker(obj.from,obj.to,obj.propertyName);
			$.each(arr,function(i,data){
				if(data[obj.propertyName]!==undefined){
					val = $(fields[obj.to]).find('input').val();
					if(val!==''){
						val += obj.multiValueSeparator;
					}
					$(fields[obj.to]).find('input').val(val+data[obj.propertyName]);
				}
			});
		});
		$(fields[obj.from]).find('img').bind('click',function(){
			setTimeout(function(){
				$(fields[obj.to]).find('input').val('');
				arr = pullUserInfoFromPicker(obj.from,obj.to,obj.propertyName);
				$.each(arr,function(i,data){
					if(data[obj.propertyName]!==undefined){			
						val = $(fields[obj.to]).find('input').val();
						if(val!==''){
							val += obj.multiValueSeparator;
						}
						$(fields[obj.to]).find('input').val(val+data[obj.propertyName]);
					}
				});
			},500);
		});
	});
}

function pullUserInfoFromPicker(finFrom,finTo){
	var result,	isResolved;	
	result = [];
	$(fields[finFrom]).find('.ms-formbody').find(&quot;div[id='divEntityData']&quot;).each(function(){
		isResolved = ($(this).attr('isresolved').toLowerCase()=='true')?true:false;		
		if(isResolved){	
			result.push(getUserInfo_v2($(this).attr('description')));				
		}			
	});
	return result;
}
&lt;/script&gt;

Change the script src to match your location of “spjs-utility.js”. If you prefer to use a local copy of jQuery, go here to download v1.6.4. I have not had the time to make it work with jQuery 1.7x so you must use v1.6.4 for now.

Alexander

26 Comments on “Pull user list property from people picker and write to separate textfield”

Kris says:

January 9, 2012 at 12:32

Hi Alexander, thank you for this variation :), is it possible say what properties are available and what their names are in sharepoint i.e department etc., thanks again for your share of knowledge 🙂

Log in to Reply
1. Alexander Bautz says:
  
  January 19, 2012 at 22:48
  
  Sorry for the late reply. You find the available properties in the array “arrOfFields” in the function “getUserInfo_v2” in the file “spjs-utility.js”.
  
  If you add some custom fields to the user list, you must update that array to include the new field names.
  
  Alexander
  
  Log in to Reply
Pawel says:

January 30, 2012 at 22:52

Hi Alexander, once again I have to ask you for help. I’m trying to get two parameters from people picker. I’ve added CellPhone property into arrOfFields as you mentioned and I’ve also added CEWP on customized form. In source editor I’ve added like below:

pullEmailFromPickerOnChange({from:’Requestor’,to:’Requestor_email’,propertyName:’EMail’,multiValueSeparator:’; ‘});
pullEmailFromPickerOnChange({from:’Requestor’,to:’Requestor_mobile’,propertyName:’CellPhone’,multiValueSeparator:’; ‘});

…

and when I choose people from picker nothing happens. In your previous version I was able to pull email without problems, but I wasn’t able to pull two parameters as I described above.

I’ve double checked FieldInternalName for both propertyNames, I’ve also double checked ID for field in my list.

Please give me a tip where it can be a problem.
Rgs.
Pawel

Log in to Reply
1. Pawel says:
  
  January 30, 2012 at 23:16
  
  Hi Alexander, I’ve noticed that in comments on your blog fragments of source code are removed. I can send you complete code which I used on my SHP but you have to tell me how 🙂 ?? In addition to my previous post I’ve also check paths to spjs-utility and jquery.
  
  Thanks in advance for your help.
  Rgs
  Pawel
  
  Log in to Reply
2. Alexander Bautz says:
  
  February 9, 2012 at 21:50
  
  Read here on how to post code in comments
  
  I’m not quite getting whether you can make it work with one parameter or not?
  
  Is your form customized in SharePoint designer? – if so, try using a non-customized form for reference.
  
  Alexander
  
  Log in to Reply

Hey Alexander! I’m SOOO Happy to find this post, but it’s not working at default. All I did was change it to my people picker field which is ‘People’. Any ideas on what I’m missing? I go into the form, add someone, and the Title field does not update.

Here is my code:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/spjs-utility.js"></script>
<script type="text/javascript">

pullEmailFromPickerOnChange({from:'People',to:'Title',propertyName:'Title',multiValueSeparator:'; '});

/******************************************************
		Do not change anything below this line
*******************************************************/
fields = init_fields_v2();
function pullEmailFromPickerOnChange(obj){
	var toFind, arr, data, val;
	
	$(document).ready(function(){
		toFind = "div.ms-inputuserfield";
		if(!browseris.ie5up && typeof(_fV4UI)==='undefined'){
			toFind = "textarea";
		}
		$(fields[obj.from]).find(toFind).bind('blur',function(){
			$(fields[obj.to]).find('input').val('');
			arr = pullUserInfoFromPicker(obj.from,obj.to,obj.propertyName);
			$.each(arr,function(i,data){
				if(data[obj.propertyName]!==undefined){
					val = $(fields[obj.to]).find('input').val();
					if(val!==''){
						val += obj.multiValueSeparator;
					}
					$(fields[obj.to]).find('input').val(val+data[obj.propertyName]);
				}
			});
		});
		$(fields[obj.from]).find('img').bind('click',function(){
			setTimeout(function(){
				$(fields[obj.to]).find('input').val('');
				arr = pullUserInfoFromPicker(obj.from,obj.to,obj.propertyName);
				$.each(arr,function(i,data){
					if(data[obj.propertyName]!==undefined){			
						val = $(fields[obj.to]).find('input').val();
						if(val!==''){
							val += obj.multiValueSeparator;
						}
						$(fields[obj.to]).find('input').val(val+data[obj.propertyName]);
					}
				});
			},500);
		});
	});
}

function pullUserInfoFromPicker(finFrom,finTo){
	var result,	isResolved;	
	result = [];
	$(fields[finFrom]).find('.ms-formbody').find("div[id='divEntityData']").each(function(){
		isResolved = ($(this).attr('isresolved').toLowerCase()=='true')?true:false;		
		if(isResolved){	
			result.push(getUserInfo_v2($(this).attr('description')));				
		}			
	});
	return result;
}
</script>

David says:

April 4, 2012 at 00:19

Nevermind, figured it out. Silly me, make sure you add this CEWP AFTER the form fields, not above.

Log in to Reply

Kris says:

April 11, 2012 at 13:16

Hi Alexander, thanks for this, really useful to have, I have added the FirstName and LastName into the array and works perfectly, in answer to Pawel problem for each bit of information you want you need to add a CEWP and add the code for each one, for example to get my first name I have all the code in a CEWP, then for the last Name I insert another CEWP and change the property name and field name, Thanks so much Alexander really helped me alot 🙂

Log in to Reply
1. Pawel says:
  
  June 4, 2012 at 22:00
  
  Hi Kris,
  Could you give me more details, how to achieve situation I described above ?? I’d like to youe one people picker and two text fields, after choosing person from people picker I’d like to both textfield be filled with user emai and mobile phone. As far as I know email paramenter is identified by ‘EMail’ tag and mobile phone is identified by ‘CellPhone’ tag. ‘EMail’ tag by default is in “arrOfFields” nut ‘CellPhone’ is not, so I’ve added ‘CellPhone’ tag in to array of fields “arrOfFields” in getUserInfo_v2 bust still no effect :(. Please describe how you pull more then one paramemeter from peoplepicker
  
  Thanks in advance
  Pawel
  
  Log in to Reply
2. Pawel says:
  
  June 5, 2012 at 23:21
  
  Hi Kris,
  I figured it out why it desn’t work :). Problem was with FieldInternalNames – I used custom forms – there is no FieldInternalName and you have to use ID property assigned to . One problem solved :D. Another problem which I’m still strugling is pulling CellPhone property. I don’t know why but I can pull any other profile properties (i.e. LastName, FirstName etc.) but CellPhone doesn’t work !!! I’m sure that CellPhone property is filled in user profiles but this script doesnt pull this property. Alexander, maybe you can help with this problem ?? Build in properties works like harm but if you have custom property in user profile it doesn’t work 🙁
  
  Log in to Reply
  1. David says:
    
    February 14, 2014 at 17:16
    
    Hey Pawel, how did you get this to work on your custom forms? I followed the instructions about replacing the “init_fields_v2” fuction on the spjs-utility and assigning an custom id tags to the table fields on my custome form
    
    and then referencing those ids using
    pullEmailFromPickerOnChange({from:’RequestedForCustomID’,to:’PhoneCustomID’,propertyName:’WorkPhone’,multiValueSeparator:’; ‘});
    I also made sure the CWE web part is below the custom form.
    Any ideas?
Ven says:

May 30, 2012 at 07:16

Hi Alexander
Really good post.
I have a question related with user profile and people picker field.

User Profiles: I have added a new section called “custom properties” and then new field called “Role” with string(Multi Value) — property type.

Values in the ‘Role’ field are: Director, Valuer.

In Manage user profiles: For some users I have allocated them as director and valuer, some are only valuers and some are only directors.

ok now in SharePoint … I have created a people picker field in a list, now the requirement is, when the user select the browse icon next to the people picker field and search for the users.,then it should search and give only the people who have the value “Valuer’ in “Role” field( User Profiles).

Any ideas, really appreciatable
Thanks

Log in to Reply
1. Alexander Bautz says:
  
  May 30, 2012 at 08:58
  
  Hi,
  The functionality you request is out of scope for this solution, sorry.
  
  Alexander
  
  Log in to Reply
JR Ruble says:

July 18, 2012 at 19:33

Hi, unfortunately my company hasn’t upgrated to SP 2010. I am found your code very useful, but I’m having to click “Check Names” twice in order for the “Title” field to populate. Any reason for this? Or way to correct?

Log in to Reply
roseline says:

August 30, 2012 at 22:52

Hi Pawel ,
I am also using custom forms, how you get the id property instead of internal name?I added some alerts to see where it is failing. I found this part it is not getting ‘2’.
alert(‘1’)
$(fields[finFrom]).find(‘.ms-formbody’).find(“div[id=’divEntityData’]”).each(function(){
alert(‘2’)

Can you please help me? My requirement is same as yours. I have personame column which is person/group column type and have other 3 text fields. Email,Work number and mobile number to be populated on selection of the user name.
Thank you
Roseline.

Log in to Reply
1. Pawel says:
  
  September 6, 2012 at 20:27
  
  Hi Rosaline,
  Answer for your question is here: https://spjsblog.com/2010/01/25/how-to-use-these-scripts-in-a-customized-form/
  
  You don’t have to look for internal names. You should add id parameter to object you would like to use and use it just like field internal name 🙂
  
  If you have further questions do not hesitate to ask 🙂
  
  Log in to Reply
nkrid says:

September 21, 2012 at 00:29

Please help,

I’ve added a new field “Manager” in spjs-utility.js.

I must be having a complete mental block …. where do i reference that I want “Manager” to appear in the text field as opposed to “Email”.

Thanks!

Log in to Reply
ganga says:

October 17, 2012 at 23:15

Do I missing something. I add a CEWP after list form.

This is code and it is not updating the value.

pullEmailFromPickerOnChange({from:’Customer Name’,to:’Location’,propertyName:’PreferredName’,multiValueSeparator:’; ‘});

/******************************************************
Do not change anything below this line
*******************************************************/
fields = init_fields_v2();
function pullEmailFromPickerOnChange(obj){
var toFind, arr, data, val;
$(document).ready(function(){
toFind = “div.ms-inputuserfield”;
if(!browseris.ie5up && typeof(_fV4UI)===’undefined’){
toFind = “textarea”;
}
$(fields[obj.from]).find(toFind).bind(‘blur’,function(){
$(fields[obj.to]).find(‘input’).val(”);
arr = pullUserInfoFromPicker(obj.from,obj.to,obj.propertyName);
$.each(arr,function(i,data){
if(data[obj.propertyName]!==undefined){
val = $(fields[obj.to]).find(‘input’).val();
if(val!==”){
val += obj.multiValueSeparator;
}
$(fields[obj.to]).find(‘input’).val(val+data[obj.propertyName]);
}
});
});
$(fields[obj.from]).find(‘img’).bind(‘click’,function(){
setTimeout(function(){
$(fields[obj.to]).find(‘input’).val(”);
arr = pullUserInfoFromPicker(obj.from,obj.to,obj.propertyName);
$.each(arr,function(i,data){
if(data[obj.propertyName]!==undefined){
val = $(fields[obj.to]).find(‘input’).val();
if(val!==”){
val += obj.multiValueSeparator;
}
$(fields[obj.to]).find(‘input’).val(val+data[obj.propertyName]);
}
});
},500);
});
});
}

function pullUserInfoFromPicker(finFrom,finTo){
var result, isResolved;
result = [];
$(fields[finFrom]).find(‘.ms-formbody’).find(“div[id=’divEntityData’]”).each(function(){
isResolved = ($(this).attr(‘isresolved’).toLowerCase()==’true’)?true:false;
if(isResolved){
result.push(getUserInfo_v2($(this).attr(‘description’)));
}
});
return result;
}

Log in to Reply
1. Alexander Bautz says:
  
  October 19, 2012 at 23:58
  
  Customer Name is not a proper FieldInternalName.
  
  Alexander
  
  Log in to Reply
2. ganga says:
  
  October 20, 2012 at 13:50
  
  Thanks Alex!
  
  I fixed it, it is working now.
  
  Log in to Reply
3. ganga says:
  
  October 20, 2012 at 16:55
  
  One more question. Is there a way to display the current user and their details in the list without picking from people picker
  
  Log in to Reply
chakri says:

June 19, 2013 at 12:11

Hi Alex

Is there any way to get the user manager name?

Log in to Reply
Alexander Bautz says:

June 19, 2013 at 22:17

Hi,
This code “reads” from the SharePoint user list and not the profile found in the server version.

Look at this one and see if you can combine them: https://spjsblog.com/2011/09/18/accessing-user-profile-information-in-sharepoint-with-javascript-updated-version/#comment-6062

Alexander

Log in to Reply
website says:

October 9, 2013 at 07:09

Way past its sell by date, it has not been moving as much
and that she is in line at Space Mountain again. If you have
a car lockout situation where your keys are
inside the car or trunk and the doors are locked with you on your trips, you
should straightaway opt for those Greece’s stunning islands.
Forth in the top five cars is the Mazda 3 which is described as” glad tidings from Allah” in
the Quran.

Log in to Reply
David says:

February 11, 2014 at 18:06

How can I push the value I get for the Manager and set a field that is not a txtbox type. For instance I am retrieving the manager network id successfully but want to populate another people picker field with that id.

Thanks,

David

Log in to Reply
1. Alexander Bautz says:
  
  February 15, 2014 at 08:01
  Hi,
  You must use the function “getUserInfo_v2” from spjs-utility.js to get the loginname, for the user like this:
```
var userInfo = getUserInfo_v2(ManagerNetworkID);
if(userInfo.success){
var login = userInfo.Name;
setFieldValue("TheFieldYouWantToSet",login);
}
```
  Alexander
  Log in to Reply

SharePoint JavaScripts

Pull user list property from people picker and write to separate textfield

How does it work

How to set it up

Like this:

26 Comments on “Pull user list property from people picker and write to separate textfield”

Leave a Reply Cancel reply

Recent Topics

Recent Replies

Recent Posts

Forums

Search Forums