Features

  • jQuery tokenized PeoplePicker for SP 2013 with picture and presence.

Prerequisites

  • SharePoint 2013
  • jQuery 1.8.x +

Installation

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/SiteAssets/jquery.peoplepicker.js" type="text/javascript"></script>
<script src="/SiteAssets/imgPreload.js" type="text/javascript"></script>
<link href="/SiteAssets/css/token-input.css" type="text/css" rel="stylesheet" />
  • Add following javascript
jQuery(document).ready(function () {
	jQuery(".inputPeoplePicker").peoplePicker();
});

Settings

searchDelay

The delay, in milliseconds, between the user finishing typing and the search being performed. default: The minimum number of characters the user must enter before a search is performed. default: 1

minChars

The minimum number of characters the user must enter before a search is performed. default: 1

principalType

Principal type to search. default: 0
options:
  • 0 - User, DL, SecGroup, SPGroup
  • 1 - User
  • 2 - DL
  • 4 - SecGroup
  • 8 - SPGroup

hintText

The text to show in the dropdown label which appears when you first click in the search field. default: "Type in a user/group name"

mySiteHostUrl

My site host url to pull the user picter. default: ""

noResultsText

The text to show in the dropdown label when no results are found which match the current query. default: "No results"

searchingText

The text to show in the dropdown label when a search is currently in progress. default: "Searching…"

deleteText

The text to show on each token which deletes the token when clicked. If you wish to hide the delete link, provide an empty string here. Alternatively you can provide a html string here if you would like to show an image for deleting tokens. default: ×

animateDropdown

Set this to false to disable animation of the dropdown default: true

tokenLimit

The maximum number of results allowed to be selected by the user. Use null to allow unlimited selections. default: 10

tokenDelimiter

The separator to use when sending the results back to the server. default: ";"

prePopulate

Prepopulate the peoplePicker with existing data. Set to an array of JSON objects, eg: {"id": "i:0#.w to pre-fill the input. default: null

Callbacks

onAdd

A function to call whenever the user adds another token to their selections. defaut: null

onDelete

A function to call whenever the user removes a token from their selections. default: null

onReady

A function to call after initialization is done and the peoplePicker is ready to use. default: null

Methods

add

Add a new token to the peoplePicker with id x and name y.
selector.peoplePicker("add", {id: x, name: y}); 

remove

Remove the tokens with id x from the peoplePicker.
selector.peoplePicker("remove", {id: x}); 

Remove the tokens with name y from the peoplePicker.
selector.peoplePicker("remove", {name: y}); 

clear

Clear all tokens from the peoplePicker.
selector.peoplePicker("clear"); 

get

Gets the array of selected tokens from the peoplePicker (each item being an object of the kind {"id": "i:0#.w|Domain\User", "value": "User Title", "email": "user@domain.com", "networkaddress": "domain\username", "sip": "sip@domain.com" }).
selector.peoplePicker("get"); 

Output

Empty

Autocomplete with picture

Select user Contact card

Select multiple user

Contact card

Last edited Aug 19, 2014 at 5:10 PM by Hemant_Mane, version 2