Tuesday 23 February 2016

SharePoint 2010 Client Side People Picker

<%@ Page Language="C#" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/forms.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var pp = $().SPServices.SPFindPeoplePicker({
peoplePickerDisplayName: "pp_displayName",
valueToSet: "xxx\\xxx;",
checkNames: true
});
 
$("#btnTest").click(function(){

var pp = $().SPServices.SPFindPeoplePicker({peoplePickerDisplayName: "pp_displayName"});
for(var i=0;i<pp.dictionaryEntries.length;i++)
alert(pp.dictionaryEntries[i].AccountName);
});
});
</script>
</head>
<body>
<form id="myPeoplePickerForm" runat="server">

<table>
<tr>
<td><nobr style="display:none">pp_displayName</nobr>

<div class="p">
<label>Enter Name(s) Here:</label>
<span style="float:left;">

<SharePoint:PeopleEditor ID="myPeoplePicker" runat="server" SelectionSet='User,SecGroup,SPGroup'/>
</span>
<div class="clear"></div>

</div>
</td></tr></table>
</form>
<button id="btnTest">Test</button>

</body>
</html>