client-side People Picker control in apps for SharePoint 2013

 the client-side People Picker control is Qucik Search and Selection for Valid  Accounts for Groups,People and Claims in their Org.  adding Picker to your App , web part, Pages is very easy because it based on html and javascript so it supports cross-browser. in you html or ASP.net MARKUP ADD A CONTAINER ELEMENT FOR THE CONTROL  and references for the control and its dependencies. Then in your script, call the SPClientPeoplePicker_InitStandaloneControlWrapper global function to render and initialize the picker.


The picker is represented by the SPClientPeoplePicker object, which provides methods that other client-side controls can use to get information from the picker or to perform other operations. You can use SPClientPeoplePicker properties to configure the picker with control-specific settings, such as allowing multiple users or specifying caching options. The picker also uses web application configuration settings such as Active Directory Domain Services parameters or targeted forests. Web application configuration settings are picked up automatically (from the SPWebApplication.PeoplePickerSettings property).
The picker has the following components:
An input text box to enter names for users, groups, and claims.
A span control that shows the names of resolved users, groups, and claims.
A hidden div element that autofills a drop-down box with matching query results.
An autofill control.

The picker and its functionality are defined in the clientforms.js, clientpeoplepicker.js, and autofill.js script files, which are located in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\15\TEMPLATE\LAYOUTS folder on the server.



The Client-side People Picker  for SharePoint 2013 apps.

1. Create a JSON dictionary to use as a schema that stores picker-specific properties, such as AllowMultipleValues and MaximumEntitySuggestions.
2. Call the SPClientPeoplePicker_InitStandaloneControlWrapper global function.
3. Get the picker object from the page.
4. Query the picker. The app in this example calls the GetAllUserInfo method to get all user information for the resolved users and theGetAllUserKeys method to just get the keys for the resolved users.
   
   

   <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

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

       <div id="peoplePickerDiv"></div>

       <div>

           <br/>

           <input type="button" value="Get User Info" onclick="getUserInfo()"></input>

           <br/>

           <h1>User info:</h1>

           <p id="resolvedUsers"></p>

           <h1>User keys:</h1>

           <p id="userKeys"></p>

       </div>

   </asp:Content>

   
   
   // Run your custom code when the DOM is ready.
   $(document).ready(function () {
   
   
       // Specify the unique ID of the DOM element where the
       // picker will render.
       initializePeoplePicker('peoplePickerDiv');
   });
   
   
   // Render and initialize the client-side People Picker.
   function initializePeoplePicker(peoplePickerElementId) {
   
   
       // Create a schema to store picker properties, and set the properties.
       var schema = {};
       schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
       schema['SearchPrincipalSource'] = 15;
       schema['ResolvePrincipalSource'] = 15;
       schema['AllowMultipleValues'] = true;
       schema['MaximumEntitySuggestions'] = 50;
       schema['Width'] = '280px';
   
   
       // Render and initialize the picker.
       // Pass the ID of the DOM element that contains the picker, an array of initial
       // PickerEntity objects to set the picker value, and a schema that defines
       // picker properties.
       this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
   }
   
   
   // Query the picker for user information.
   function getUserInfo() {
   
   
       // Get the people picker object from the page.
       var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
   
   
       // Get information about all users.
       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] + '
   ';
           }
       }
       $('#resolvedUsers').html(userInfo);
   
   
       // Get user keys.
       var keys = peoplePicker.GetAllUserKeys();
       $('#userKeys').html(keys);
   }
   
   
   
   
   Asp.net markup for SharePoint Page or Webpart use this
           runat="server" VisibleSuggestions="3" Rows="1" AllowMultipleEntities="true" CssClass="ms-long ms-spellcheck-true" Height="85px"/>
   // bind or adding 
   SPUser  userToassign = GetYourSPUser();

   if (assignToUser != null)

   {

     PeopleEditor pe = new PeopleEditor();

     PickerEntity entity = new PickerEntity();

     entity.Key = userToassign.LoginName;

     entity = pe.ValidateEntity(entity);

     entity.IsResolved = true;

     llboPP.AddEntities(new List { entity });

   }

   
   

   
   

    ///Select Users

   SPUser PPuser = null;

   ArrayList resolvedEntities = llboPP.ResolvedEntities;

   foreach (PickerEntity entity in resolvedEntities)

   {

      string loginUsernameName = entity.Key;

   //check valid user

      PPuser = site.RootWeb.EnsureUser(loginUsernameName);

      break;

   }
   
   
   
   
   
   
   Ref :
   http://msdn.microsoft.com/en-us/library/jj713593.aspx

share this post