1

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

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.

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 '18 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. – JoannaW_MSFT Dec 10 '18 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 '18 at 8:46
  • please check the update in my answer. – JoannaW_MSFT Dec 10 '18 at 9:45

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.