SharePoint 2013 Client Side People Picker in Content Editor Web Part

Question

Has anyone tried to use the client side people picker in a content editor web part? I have successfully got it to work in IE by adding all the script references and initialize function to the content editor web part. Now the strange part is, the people
picker doesn't render in other browsers, I tried in Chrome, Safari, and Firefox. Any ideas?

Answer 1

Below can be used to create people picker in CEWP
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> 
   <script type="text/javascript" src="../Apps/_layouts/15/clienttemplates.js"></script> 
   <script type="text/javascript" src="../Apps/_layouts/15/clientforms.js"></script> 
   <script type="text/javascript" src="../Apps/_layouts/15/clientpeoplepicker.js"></script> 
   <script type="text/javascript" src="../Apps/_layouts/15/autofill.js"></script> 
   <script type="text/javascript" src="../Apps/_layouts/15/sp.js"></script> 
   <script type="text/javascript" src="../Apps/_layouts/15/sp.runtime.js"></script> 
   <script type="text/javascript" src="../Apps/_layouts/15/sp.core.js"></script> 
   <script type="text/javascript">
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../SiteAssets/PeoplePicker/App.css"/>
<!-- Add your JavaScript to the following file -->
// 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] + '<br>';
    $('#resolvedUsers').html(userInfo);
    // Get user keys.
    var keys = peoplePicker.GetAllUserKeys();
    $('#userKeys').html(keys);
</script>
</asp:content> 
<asp:content contentplaceholderid="PlaceHolderMain" runat="server">
<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>​​​​​​​​​
Vishnu