Posted by: R Manimaran | September 21, 2015

SharePoint 2013: Restrict Client People Picker users to particular SharePoint group

I was creating a SharePoint hosted app in SharePoint 2013. In the app I have placed a client side people picker to select the reviewers. When I install and run the app, people picker is working well but showing all the users. I want to restrict the users listed from a SharePoint group. To restrict I have made the below code changes. Here are the steps to restrict the client people picker to particular SharePoint group.

I have created a group named Reviewers in the host web and added some sample users.


I have created a SharePoint hosted app placed the below code which will refer the client people picker in Default.aspx.

<!-- For People Picker -->

<SharePoint:ScriptLink name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false" />

<SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false" />

<SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false" />

<SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false" />

<SharePoint:ScriptLink name="sp.js" runat="server" LoadAfterUI="true" Localizable="false" />

<SharePoint:ScriptLink name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false" />

<SharePoint:ScriptLink name="sp.core.js" runat="server" LoadAfterUI="true" Localizable="false" />

<!--- -->

In the PlaceHolderMainsection place a div with ID.

In the App.js file added the below methods. I have used the REST API to get the Id of the SharePoint group and pass it to the Client People picker SharePointGroupID properties.

var hostweburl;

var appweburl;

var reviewGroupId;

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model

$(document).ready(function () {

hostweburl =




appweburl =






function loadDependentScripts() {

var scriptbase = hostweburl + "/_layouts/15/";

// Load the js files and continue to the successHandler

$.getScript(scriptbase + "SP.Runtime.js",

function () {

$.getScript(scriptbase + "SP.js",

function () { $.getScript(scriptbase + "SP.RequestExecutor.js", LoadInitial); }





function LoadInitial() {

var executor = new SP.RequestExecutor(appweburl);


url: appweburl + "/_api/SP.AppContextSite(@target)/web/SiteGroups/getbyname('Reviewers')?@target='" + hostweburl + "'",

method: "GET",

headers: { "Accept": "application/json;odata=verbose" },

success: getGroupIdSuccessHandler,

error: getGroupIdErrorHandler



function getGroupIdSuccessHandler(data) {

var jsonObject = JSON.parse(data.body);

reviewGroupId = jsonObject.d.Id;



function getGroupIdErrorHandler(data, errorCode, errorMessage) {

alert("Could not get the information:" + errorMessage);


function initializePeoplePicker(peoplePickerElementId, Id) {

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

var schema = {};

schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';

schema['SearchPrincipalSource'] = 15;

schema['ResolvePrincipalSource'] = 15;

schema['AllowMultipleValues'] = false;

schema['MaximumEntitySuggestions'] = 50;

schema['Width'] = '280px';

schema['SharePointGroupID'] = Id;

SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);


function getQueryStringParameter(paramToRetrieve) {

var params =


var strParams = "";

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

var singleParam = params[i].split("=");

if (singleParam[0] == paramToRetrieve)

return singleParam[1];



Now I install and access the App my people picker is allowing to select users who are available in “Reviewers” SharePoint group.



Note: Give read permission to the App to access the host site collection.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: