0

I know that the old Peoplepicker won't work in a SP2013 Sandbox Webpart, but how about the ClientPeoplePicker - Is it possible?

Or is there a another solution to select fast & easy an SPUser inside a form?

0

Yes, the ClientPeoplePicker will work.

I've gotten it to work inside an App Part, actually - here's a quick guide to the HTML/CSS/JS side of things. I took this from an example I found on the web - don't recall the URL but if you google ClientPeoplePicker you'll get some good results.

  1. First, you're going to need to include basically every JavaScript file ever. If you're not using an App Part you may not need all of these.

        <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.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" src="/_layouts/15/1033/initstrings.js"></script>
    <script type="text/javascript" src="/_layouts/15/1033/strings.js"></script>
    <script type="text/javascript" src="/_layouts/15/init.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>   
    <script type="text/javascript" src="/_layouts/15/autofill.js"></script>             
    <script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script>
    <script type="text/javascript" src="/_layouts/15/clientforms.js">  </script>
    <script type="text/javascript" src="/_layouts/15/clienttemplates.js"></script>  
    
  2. Create a container for the People Picker - also included here are some debug tools:

    <div id="peoplePickerDiv" style="height:70px;width:200px;"></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 ID:</h1>
    <p id="userId"></p>
    </div>
    
  3. Create a new JS file and put the following code inside it:

    $(document).ready(function () {
    
         SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
    })
    
    function sharePointReady() {
    context = new SP.ClientContext.get_current();
    web = context.get_web();
    getUser().done(function (user) {
    var schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = false;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';
    
    var users = new Array(1);
    var defaultUser = new Object();
    defaultUser.AutoFillDisplayText = user.get_title();
    defaultUser.AutoFillKey = user.get_loginName();
    defaultUser.Description = user.get_email();
    defaultUser.DisplayText = user.get_title();
    defaultUser.EntityType = "User";
    defaultUser.IsResolved = true;
    defaultUser.Key = user.get_loginName();
    defaultUser.Resolved = true;
    users[0] = defaultUser;
    SPClientPeoplePicker_InitStandaloneControlWrapper('peoplePickerDiv', users, schema);
    });
    }
    
    function getUser() {
    var dfd = $.Deferred(function () {
    user = web.get_currentUser();
    context.load(user);
    context.executeQueryAsync(
        function () {
            dfd.resolve(user);
        }),
        function () {
            dfd.reject(args.get_message());
        };
    });
    return dfd.promise();
    }
    
    
    // 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);
    
    // Get the first user's ID by using the login name.
    getUserId(users[0].Key);
    }
    

Sorry for the bad formatting, StackOverflow is not being agreeable today.

The general idea here is that the people picker will render inside your div and you can interact with its selections as demonstrated by GetUserInfo().

Hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.