Put a people picker in a regular aspx page

Forums General discussion Put a people picker in a regular aspx page

This topic contains 0 replies, has 1 voice, and was last updated by  Alexander Bautz 1 week, 5 days ago.

  • Author
    Posts
  • #21114

    Alexander Bautz
    Keymaster

    Here is a code snippet that you can use to show a PeoplePicker on a regular aspx web page in SharePoint. The example will show a PeoplePicker autocomplete, and a button that alerts the contents of the people picker. It doesn’t do anything other than that.

    <div id='customPeoplePicker' onkeydown='event.stopPropagation()' style='height:22px'></div>
    <div style="margin-top:10px;">
    Hit this button to get the PP value: <input type="button" onclick="getPPvalue();" value="Get PP value">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/_layouts/15/clienttemplates.js"></script>
    <script src="/_layouts/15/clientforms.js"></script>
    <script src="/_layouts/15/clientpeoplepicker.js"></script>
    <script src="/_layouts/15/autofill.js"></script>
    <script type="text/javascript">
        function showPP() {
            var schema = {};
            schema.PrincipalAccountType = 'User,DL,SecGroup,SPGroup';
            schema.SearchPrincipalSource = 15;
            schema.ResolvePrincipalSource = 15;
            schema.AllowMultipleValues = true;
            schema.MaximumEntitySuggestions = 50;
            schema.Width = '350px';
            schema.Height = '55px';
            this.SPClientPeoplePicker_InitStandaloneControlWrapper("customPeoplePicker", null, schema);
        }
        
        setTimeout(function(){
            showPP();
        },250);
    
        function getPPvalue() {
            var pp = SPClientPeoplePicker.SPClientPeoplePickerDict.customPeoplePicker_TopSpan, users = pp.GetAllUserInfo(), arr;
            // Get current PP values
            arr = [];
            jQuery.each(users, function (i, o) {
                arr.push(o.Key);
            });
            alert(JSON.stringify(arr));
        }
    </script>

    You might need to change the src to the script if your page isn’t on the root of your site collection.

    Alexander

You must be logged in to reply to this topic.