Tags

, ,


I am so much excited to share a plugin that I built and this is also my first step towards building a component and share it to the community. I will try to continue developing more utilities and share more information.

SharePoint 2013 has a changed the usability and functionality of a people picker. Also it enabled client side programming to search for users across Active Directory. More documentation on how to use a client side People Picker Control can be found here: How to: Use the client-side People Picker control in apps for SharePoint

Based on the documentation from MSDN I created a plugin to use it easily even in a content editor web part. Advantages of this plugin:

  1. Can be used everywhere – Content Editor Web part, Web Page, Custom Application page etc
  2. Easily configurable
  3. Open for customization

You can find the source code on github: Source Code

Here is a quick example of how to configure this in a content editor web part

  1. Download the sppeoplepicker.min.js from the above source code location and also the latest version of jQuery
  2. Upload the jQuery and sppeoplepicker.min.js to the Style Library
  3. Create a SharePoint Page and add a content editor web part.
  4. Edit the content editor web part and add the below references

    <script src="../Style Library//jquery.min.js"></script>
    <script src="../Style Library/sppeoplePicker.min.js"></script>
    
  5. Here is the html template for the demo
    
    <table class="spPeoplePickerTable" width="50%" cellpadding="10" cellspacing="1">
    	<tr>
    		<td>People Picker 1: </td>
    		<td><div id="peoplePickerDiv"></div></td>
    		<td><button id="pp1">Show</button></td>
    	</tr>
    	<tr>
    		<td>People Picker 2:</td>
    		<td><div id="anotherPeoplePickerDiv"></div></td>
    		<td><button id="pp2">Show</button></td>
    	</tr>
    
    </table>
    
    
    
  6. In the document.ready function register the people picker for the div elements
    <script type="text/javascript">
    	$(document).ready(function () {
    				$("#peoplePickerDiv").spPeoplePicker();
    				$("#anotherPeoplePickerDiv").spPeoplePicker();
    
    			
    			$("#pp1").click(function(){
    				alert($("#peoplePickerDiv").getUserInfo());
    				return false;
    			});
        		$("#pp2").click(function(){
    				alert($("#anotherPeoplePickerDiv").getUserInfo());
    				return false;
    			});
    
    	});
    	
    </script>
    
    
  7. To read the values from the control I also provided another method getUserInfo(). Applying this over the div element will read values from the control.
  8. Save the Content Editor web part and the page

Output:
User Selection
2

Get User Info on selected control
1

Hope this will help.

Happy Coding…!!!

Advertisements