Wednesday, July 16, 2014

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



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

2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Is there any way to limit one user selection only? I don't want user to select multiple users.

    ReplyDelete