SharePoint People Picker

In this blog you will learn about SharePoint Client People Picker using CSOM With Individual Group Members Filter.

Code for Js

(function($) {
    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'] = 'User,DL,SecGroup,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();
            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);
    }
})(jQuery);

Procedure

Step 1

Save Above code as JS file and refer to it in your Program

Step 2

Call it by using the below function

$(function() {
    $('#ppDefault').spPeoplePicker();
});

Step 3 

Create below div in your Html file

<div id="ppDefault"></div>

Step 4

Add schema ['SharePointGroupID'] = (Group No(eg 7)); in function initializePeoplePicker(eleId) to Filter Users from Invidual Group....//(this if For only Members in the Group hav loaded in People Picker..)

i.e. schema['SharePointGroupID'] = 7;

Step 5

Create the .txt File using the above procedure, and include the hyperlink of Js created in step 1 and add Min.jss and relevant CSS

Step 6

Call this Html in your  Sharepoint Page using Content Editor WebPart....

I hope I have helped someone.