SharePoint 2013 Client People Picker Control

The SharePoint Client People Picker control looks very good and gives end user easy of selecting the targeted user with its dynamic drop down list of keyed characters.

To use this in normal way, it looks pretty easy too. Paste the below code and it works fine as expected.

<SharePoint:ClientPeoplePicker

Required="true"

ValidationEnabled="true"

ID="pplPickerSiteRequestor"

UseLocalSuggestionCache="true"

PrincipalAccountType="User"

runat="server"

VisibleSuggestions="3"

Rows="1"

AllowMultipleEntities="false"

CssClass="ms-long ms-spellcheck-true user-block"

ErrorMessage="*" 

/>

I am not sure whether its a bug or desgined as per client side for OOB forms. Here I faced a challenge where I require in this control user need to allow for Only One User.

The problem is if user enters second user it should restrict and should not submit the form. Basically if you observe the attribute AllowMultipleEntities="false" as developer we think it will takecare of. But this happens the half way, like it submits the form but in the server side you will get only one user. In order to avoid this, I embedded a custom validator and controlling the form to not to submit if more than one user is there. 

Below is the snippet code for it.

<asp:CustomValidator ID="cvpplSiteRequestor" runat="server" ControlToValidate="pplPickerSiteRequestor" ForeColor="Red" 

ClientValidationFunction="CheckSiteRequestor" 

ErrorMessage="User is a required field" ValidationGroup="SiteAccessForm" Text="*"></asp:CustomValidator>

Javascript Code:-

function CheckSiteRequestor(sender, args) {

args.IsValid = false;

var userCount = $("span.ms-entity-resolved").length; //Returns the Resolved User Name 's Count

if (userCount === 1) {

args.IsValid = true;

}

}

Here I do have another requirement where having Clear Button, which should clear all input form elements. For this Client People Picker, we dont have any default attribute or function. Below is the code snippet which will make sure the OOB feature is residing.

Javascript Code:-

function ClearFields() {

$("#<%= pplPickerSiteRequestor.ClientID %>_TopSpan_EditorInput").attr('placeholder', 'Enter a name or email address...');

$("#<%= pplPickerSiteRequestor.ClientID %>_TopSpan_InitialHelpText").css("display", "none");

var processedUserListCount = $(".sp-peoplepicker-userSpan").length;

for (var i = 0; i < processedUserListCount; i++)

SPClientPeoplePickerProcessedUser.DeleteProcessedUser($(".sp-peoplepicker-userSpan")[0]);

}