SharePoint 2013 jQuery PeoplePicker with picture & presence

In my previous post I shared a solution to extend the SharePoint search box to search the user/group with presence/picture. That gave me an idea to create a tokenized input box with user picture and presence. To create tokenized input box I used the original jquery plugin Token Input.

I have uploaded jQuerySPPeoplePicker plugin on codeplex.

Features

jQuery tokenized PeoplePicker for SP 2013 with picture and presence.

Prerequisites

• SharePoint 2013
• jQuery 1.8.x +

Installation

• Copy jquery.peoplepicker.js, imgPreload.js, token-input.css & spinner.gif to Site.
• Add reference to the page
• Add following JavaScript

Configuration

Following options are available:

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|Domain\User", "value": "User Title", "email": "user@domain.com", "networkaddress": "domain\username", "sip": "sip@domain.com" }] 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

jQuery PeoplePicker also uses imgPreload plugin to show spinner before loading the user picture.

You can download the latest source code from codeplex