SharePoint People Picker Groups Only

Question

I want to filter a people picker in SharePoint by Groups only (out of the box only has People and Groups or People Only)

How can I achieve this please?

I have this page actually not the actual upload page but I have no idea how to add a script editor webpart to it:

Answer 1

You need to create and use the client-side People Picker control by yourself.

The ClientPeoplePicker schema has a property named "PrincipalAccountTye". This string used to specify the type of principals to be resolved in a query Comma-separated : "User,DL,SecGroup,SPGroup".

PrincipalAccountType values:

• User = single user
• DL = AD distribution list
• SecGroup = AD security group
• SPGroup = SharePoint group

If you want to get SharePoint Group only, you can set the "PrincipalAccountTye" property to "SPGroup".

A demo: create a people picker (SharePoint Group only) with JavaScript:

<table width="50%" cellpadding="10" cellspacing="1">

    <tbody>

        <tr>

            <td>People Picker 1: </td>

            <td><div id="peoplePickerDiv"></div></td>

            <td><button id="pp1">Show</button></td>

            <td><span id="pp11"></span></td>

        </tr>    

    </tbody>

</table>


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript">

RegisterScriptFiles('clienttemplates.js');

RegisterScriptFiles('clientforms.js');

RegisterScriptFiles('clientpeoplepicker.js');

RegisterScriptFiles('autofill.js');


function RegisterScriptFiles(filename) {

    var scriptEle = document.createElement('script');

    scriptEle.setAttribute("type", "text/javascript")

    scriptEle.setAttribute("src", "/_layouts/15/" + filename);

    document.getElementsByTagName("head")[0].appendChild(scriptEle)


}

// Render and initialize the client-side People Picker.

function initializePeoplePicker(eleId) {

    // Create a schema to store picker properties, and set the properties.

    var schema = {};

    schema['PrincipalAccountType'] = '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(eleId, null, schema);

}


function GetPeoplePickerValues(eleId) {

    var toSpanKey = eleId + "_TopSpan";

    var peoplePicker = null;

    // Get the people picker object from the page.

    //var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

    var ClientPickerDict = this.SPClientPeoplePicker.SPClientPeoplePickerDict;

    // Get the people picker object from the page.

    for (var propertyName in ClientPickerDict) {

        if (propertyName == toSpanKey) {

            peoplePicker = ClientPickerDict[propertyName];

            break;

        }

    }

    if (peoplePicker != null) {

        // Get information about all users.

        var users = peoplePicker.GetAllUserInfo();

        console.log(users);

        var userInfo = '';

        for (var i = 0; i < users.length; i++) {

            var user = users[i];

            userInfo += user['DisplayText'] + ";#";

        }

        return userInfo;

    }

    else

        return '';

}


$.fn.spPeoplePicker = function () {

    var eleId = $(this).attr('id');

    ExecuteOrDelayUntilScriptLoaded(function () { initializePeoplePicker(eleId); }, 'sp.core.js');

};


// Query the picker for user information.

$.fn.getUserInfo = function () {

    var eleId = $(this).attr('id');

    var spUsersInfo = GetPeoplePickerValues(eleId);

    return spUsersInfo.slice(0, -2);

}


$(document).ready(function () {

        $("#peoplePickerDiv").spPeoplePicker();


    $("#pp1").click(function(){

        console.log($("#peoplePickerDiv").getUserInfo());

        $("#pp11").text($("#peoplePickerDiv").getUserInfo());

        return false;

    });

});

</script>

How to use client-side People Picker

Update:

The OOB New Folder feature uses the Upload.aspx page. You can edit it using SharePoint Designer. Open the library in SharePoint Designer -> Edit Upload.aspx in advanced mode.

Per your screenshot of New Folder, the page has already been customized. Try to find out your page using F12 and customize it.