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: enter image description here

1 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">



            <td>People Picker 1: </td>

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

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

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




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

<script type="text/javascript">





function RegisterScriptFiles(filename) {

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

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

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



// 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];




    if (peoplePicker != null) {

        // Get information about all users.

        var users = peoplePicker.GetAllUserInfo();


        var userInfo = '';

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

            var user = users[i];

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


        return userInfo;



        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 () {





        return false;




How to use client-side People Picker


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.

enter image description here

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

  • Hi Can you please guide me into where I can place the html for the client side people picker? I want it ot be on the Upload.aspx as a 3rd field... but in the Upload.aspx page I do not have direct access to the fields...
    – Saz Mifsud
    Dec 7, 2018 at 9:58
  • Why do you want it on the upload.aspx page? It is an application page and it cannot be modified from UI. Dec 10, 2018 at 4:46
  • please see my edit above... it is not the actual upload page but I have a new content type - how can i add a script editor there pls?
    – Saz Mifsud
    Dec 10, 2018 at 8:46
  • please check the update in my answer. Dec 10, 2018 at 9:45
  • If you use the jQuery people picker plugin from this answer in production code, these things are critical to change: 1. Change this in GetPeoplePickerValues to window 2. Check that the element has an id in $.fn.spPeoplePicker and create one if not Apr 5, 2021 at 17:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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