Search This Blog

Sunday, July 2, 2017

People Picker- Sharepoint 2013 using Javascript



Step 1 : Add Script editor webpart,
Step 2 : Paste below code.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://onlinesite/_layouts/15/clientpeoplepicker.js"></script>
<script src="http://onlinesite/_layouts/15/clienttemplates.js"></script>
<script src="http://onlinesite/_layouts/15/clientforms.js"></script>
<script src="http://onlinesite/_layouts/15/sp.core.js"></script>
<script src="http://onlinesite/_layouts/15/sp.runtime.js"></script>
<script src="http://onlinesite/_layouts/15/autofill.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(getUserInformation, "sp.js");
      function getUserInformation() {

          var context = new SP.ClientContext.get_current();
          var web = context.get_web();
          var currentUser = web.get_currentUser();

          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);
      }

      function getUserInfo() {

          // Get the people picker object from the page.
          var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
          var displytext = "";
          // 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] + '<br>';
                  displytext= user["DisplayText"];
              }
          }
          $('#resolvedUsers').html(userInfo);

          // Get user keys.
          var keys = peoplePicker.GetAllUserKeys();
          $('#userKeys').html(keys);
          document.getElementById("txtUser").value = keys;
          document.getElementById("txtUserName").value = displytext;
      }

</script>

<div style="background-color:red" id="peoplePickerDiv">

</div>
<div>
    <br />
    <input type="text" id="txtUser" />
    <input type="text" id="txtUserName" />
    <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>
    <h1>User ID:</h1>
    <p id="userId"></p>
</div>

No comments:

Post a Comment