Sharepoint - How Can I Use the SharePoint People Picker Control in my Custom Web Part?

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


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


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

Tags: