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).

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

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

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 thoughts on “Pull user list property from people picker and write to separate textfield”

  1. 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 🙂

    1. 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

  2. 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

    1. 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

  3. 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>
    
    
    
  4. 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 🙂

    1. 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

    2. 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 🙁

      1. 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?

  5. 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

  6. 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?

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

  8. 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!

  9. 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;
    }

  10. 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.

  11. 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

    1. 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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.