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.

Image may be NSFW.
Clik here to view.

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 =

decodeURIComponent(

getQueryStringParameter("SPHostUrl")

);

appweburl =

decodeURIComponent(

getQueryStringParameter("SPAppWebUrl")

);

loadDependentScripts();

});

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);

executor.executeAsync({

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;

initializePeoplePicker('reviewerDiv',reviewGroupId);

}

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 =

document.URL.split("?")[1].split("&");

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.

Image may be NSFW.
Clik here to view.