SharePoint 2013 ClientPeoplePicker test script
I am working in an environment where I am not able to deploy SharePoint-hosted add-ins. I wanted to test the ClientPeoplePicker in my environment with a simple Content Editor Web Part to get the user email. I tweaked the script at the following Microsoft article by setting the schema setting AllowMultipleValues to accept one selected user and only users in the schema setting PrincipalAccountType.
Original code: https://msdn.microsoft.com/en-us/library/office/jj713593(v=office.15).aspx
I added the following lines for the quick test:
var user = users[i]; var email = users[0].EntityData.Email; $('#userEmail').html(email);
You can copy the script to a text file and add it to the Content Editor Web Part link for a quick test. The complete code to drop inside a file and point to from a Content Editor Web Part:
<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> <h1>User email</h1> <p id="userEmail"></p> </div> <script type="text/javascript" src="https://mydomeain.com/sites/mysitecollection/SiteAssets/jquery-1.11.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="/_layouts/15/clienttemplates.js"></script> <script type="text/javascript" src="/_layouts/15/clientforms.js"></script> <script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script> <script type="text/javascript" src="/_layouts/15/autofill.js"></script> <script type="text/javascript" src="/_layouts/15/sp.js"></script> <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> <script type="text/javascript" src="/_layouts/15/sp.core.js"></script> <script type="text/javascript" > $(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'; schema['SearchPrincipalSource'] = 15; schema['ResolvePrincipalSource'] = 15; schema['AllowMultipleValues'] = false; 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]; var email = users[0].EntityData.Email; $('#userEmail').html(email); for (var userProperty in user) { userInfo += userProperty + ': ' + user[userProperty] + '<br>'; } } $('#resolvedUsers').html(userInfo); // Get user keys. var keys = peoplePicker.GetAllUserKeys(); $('#userKeys').html(keys); } </script>
Leave a Reply
You must be logged in to post a comment.