SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I need to add a people picker control to my custom web part. SharePoint has an OOB people picker control (which provides suggestions while typing into the control).

Is there a way to use the OOB SharePoint People Picker control in my custom web part?

share|improve this question
up vote 12 down vote accepted

I found a solution for this problem.

below code should be added to ascx file

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 

<SharePoint:ScriptLink name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="sp.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="sp.core.js" runat="server" LoadAfterUI="true" Localizable="false"/>

add the below javascript to your code

  <script type="text/javascript">
      $(document).ready(function () {

          // Specify the unique ID of the DOM element where the// picker will render.
          initializePeoplePicker('peoplePickerDiv');
      });

      function initializePeoplePicker(peoplePickerElementId) {

          var schema = {};
          schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
          schema['SearchPrincipalSource'] = 15;
          schema['ResolvePrincipalSource'] = 15;
          schema['AllowMultipleValues'] = true;
          schema['MaximumEntitySuggestions'] = 50;
          schema['Width'] = '280px';
          schema['Height'] = '55px';

          this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
      }

      function getUserInfo() {

          var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

          var users = peoplePicker.GetAllUserInfo();
          var userInfo = '';
          for (var i = 0; i < users.length; i++) {
              var user = users[i];
              for (var userProperty in user) {
                  userInfo += userProperty + ':  ' + user[userProperty] + '<br>';
              }
          }
         // $('#resolvedUsers').html(userInfo);

          var keys = peoplePicker.GetAllUserKeys();
         // $('#userKeys').html(keys);
          document.getElementById('<%=RandomList.ClientID%>').value =keys ;
      }




</script>

add this div in the place you want the control

  <div id="peoplePickerDiv" style="height: 22px" >

  </div> 

i found the answer at http://msdn.microsoft.com/en-us/library/jj713593.aspx

share|improve this answer
1  
on which version of SP did you implement this? 2010 or 2013? – rob.alarcon Mar 7 '14 at 20:49

add this code in your .ascx page

<SharePoint:PeopleEditor ID="spPeoplePicker" runat="server" Width="350" SelectionSet="User" />

You can also refer to link below. it is showing same problem you have now. there is no difference to take PeoplePicker in SP 2010 and SP 2013.

http://social.technet.microsoft.com/Forums/en-AU/sharepoint2010programming/thread/7ce91149-e3d7-4178-8c10-4a87e7352197

share|improve this answer
1  
This is not the control that DannyRatna was talking about. The SP 2013 control that "provides suggestions while typing into the control" is ClientPeoplePicker as others have answered here. – MiniRagnarok Aug 27 '14 at 14:57

In SharePoint 2013 there is a new control for selecting people and group. This is the ClientPeoplePicker control. Here is a post how to use it : http://spobject.blogspot.com/2013/02/clientpeoplepicker-in-sharepoint-2013.html

share|improve this answer

just use this in the ascx page. :D works like magic ;)

<SharePoint:ClientPeoplePicker Required="true" ValidationEnabled="true" ID="peoplePicker" 
        runat="server" VisibleSuggestions="3" Rows="1" AllowMultipleEntities="true" CssClass="ms-long ms-spellcheck-true" Height="85px" />
share|improve this answer

Below works for me in SharePoint 2013:

Control in the .ascx:

<SharePoint:ClientPeoplePicker id="spPeoplePicker" runat="server"/>

Code in the .ascx.cs:

PickerEntity picker = (PickerEntity)spPeoplePicker.ResolvedEntities[0];
SPUser user = web.EnsureUser(picker.Key);
SPFieldUserValue fieldvalue = new SPFieldUserValue(web, user.ID, user.LoginName);
item["User"] = fieldvalue;
item.Update();

where "item" is the new SPListItem and "web" is the new SPWeb

share|improve this answer

protected by Community 2 days ago

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.