Client Side People Picker In SharePoint 2013

In this article we are going to see how to use client side people picker in SharePoint 2013.

The SharePoint people picker is already available in SharePoint as a server control, but now a days all are moving to client side based code since office 365 supports only client side. So we need to know how to be use people picker in client side.

Required JavaScript Library

The client side people works depends on multiples SharePoint JavaScript library,

<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/1033/strings.js"></script>
<script src="/_layouts/15/clienttemplates.js"></script>
<script src="/_layouts/15/clientforms.js"></script>
<script src="/_layouts/15/clientpeoplepicker.js"></script>
<script src="/_layouts/15/autofill.js"></script>
<script src="_layouts/15/sp.core.js"></script>

 

Steps to Implement People Picker

Step 1

Refer the above JavaScript files in your page.

Step 2

Create a div tag in your page.

<div id=’peoplepicker’ /></div>

Step 3

Initialize the people picker on page load 

$(document).ready(function() {
    initializePeoplePicker(’peoplepicker’, false, ‘People Only’, 44);

    function initializePeoplePicker(peoplePickerElementId, AllowMultipleValues, PeopleorGroup, GroupID) {
        // Create a schema to store picker properties, and set the properties.
        var schema = {};
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['MaximumEntitySuggestions'] = 50;
        schema['Width'] = '280px';
        schema['AllowMultipleValues'] = AllowMultipleValues;
        if (PeopleorGroup == 'PeopleOnly') schema['PrincipalAccountType'] = 'User';
        else schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
        if (GroupID > 0) {
            schema['SharePointGroupID'] = GroupID
        }
        // 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(peoplePickerElementId, null, schema);
    }
});

Note - Usage of the parameters values

1. peoplePickerElementId(Text) - Id of the control.
2. AllowMultipleValues - Its used to define whether the control can allow multiple user or not.Possbile values are True or False.
   

   True - will allow to add multiple Users.

   False - will only allow single user.

3. PeopleorGroup(Text) - It’s used to define whether the control can allow users and groups are only user. Possible values are ‘PeopleOnly’or ‘PeopleAndGroups’
   

   PeopleOnly - will allow only user to add.

   PeopleAndGroups - will allow to add users and groups also.

4. GroupID(Int) : it’s used to define the users can add only from the specified group id. The possible values are
   0 or any Group ID of the group
   

   0 - its allows to get users from any groups to add.

   Group Id - its allow to get users from specified group.

Get User values from the Control 

// Query the picker for user information.
// PeoplepickerId = Id of the people picker
function getUserInfo(PeoplepickerId) {
    // Get the people picker object from the page.
    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[PeoplepickerId + "_TopSpan"];
    if (!peoplePicker.IsEmpty()) {
        if (peoplePicker.HasInputError) return false; // if any error
        else if (!peoplePicker.HasResolvedUsers()) return false; // if any invalid users
        else if (peoplePicker.TotalUserCount > 0) {
            // Get information about all users.
            var users = peoplePicker.GetAllUserInfo();
            var userInfo = '';
            var promise = '';
            for (var i = 0; i < users.length; i++) {
                UsersID += GetUserID(users[i].Key);
            }
            return UsersID;
        }
    } else {
        return UsersID;
    }
}
// Get the user ID.
function GetUserID(logonName) {
    var item = {
        'logonName': logonName
    };
    var UserId = $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/ensureuser",
        type: "POST",
        async: false,
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function(data) {
            return data.Id + ';#' + data.Title + ';#';
        },
        error: function(data) {
            failure(data);
        }
    });
    return UserId.responseJSON.d.Id + ';#' + UserId.responseJSON.d.Title + ';#';
}

The results will be after calling the methods: 40;#hmg\naveen.kumar;#30;#hmg\username;#