SharePoint 2013 Lync Presence using jQuery

In my last couple of assignments I was working on Lync presence for user in SharePoint 2013. After that I decided to create a jQuery plugin to render user presence in SharePoint 2013. This plugin  renders lync presence on the basis of account name ("DomainName\\UserName" or "i:0%23.f|membership|username@domain.com"). I have also uploaded the plugin to codeplex

Prerequisites

• SharePoint 2013
• JQuery 1.8.x +

Installation

• Copy jquery.lyncprecence.js to Site.
• Add reference to the page
• Add following JavaScript

Settings

type:

Output for the lync presence. default : "default"
Options
     default
     withpicturesmall
     withpicture
     pictureonlysmall
     pictureonly
     presenceonly

redirectToProfile:

Redirect to profile page after click. default : true

Output

Default

With Picture [Small]

With Picture

Picture Only [Small]

Picture Only

Presence Only

Contact Card

You can download the latest source code from codeplex
Please report any bugs or feature requests in comments.

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

SharePoint 2013 search users/group auto complete with presence

Recently my client ask me to update the SharePoint 2013 search box to display the user/group with presence. Also on selection of user it should redirected to user profile page. I came up with SPSearchUserAutocomplete plugin to search user.

Features

• Update SharePoint 2013 search input box to search people with the presence
• Redirect to Profile page on selection [optional]
• Show user picture with presence [optional]

Prerequisites

• SharePoint 2013
• jQuery 1.8.x +
• jQuery UI JS 1.10.x
• jQuery UI CSS 1.10.x

Installation

• Copy jquery.searchpeople.js, imgPreload.js and spinner.gif to Site.
• Add reference to the page/masterpage
• Add following javascript

Settings

mySiteUrl :

My site url. User will redirect to profile page url. default: ""
e.g.  http://PROFILE_URL/person.aspx?accountname=NETWOR_ID 

redirectToProfilePage :

If true then user will be redirected to profile page url on selection. default: false

maxSuggetions :

Maximum suggestions to display. default: 10.

showpicture:

Show user picture. default: true

principalType:

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

Search without picture

Search with picture

Contact card

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

You can download the latest source code from codeplex