Sign up ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I would like to know if there is a way to generate a SharePoint 2010 People picker control just with JavaScript. Imagine that I am doing a Windows 8 App, I would like to create that control dynamically. Remember JavaScript only!


share|improve this question

3 Answers 3

up vote 2 down vote accepted

OK, finally got. After long hours looking at the ugliest HTML/JS even written and short short periods of insanity, I add an idea that I don't totally like and it isn't the best, but at this point I don't f***ing care. I just want to get over this.

So, I simple create a basic .aspx page with the follwing code:

<%@ Page Language="C#" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<!DOCTYPE html>
<html lang="en" xmlns="">
    <form id="SdfPeoplePickerForm" runat="server">   
        <SharePoint:PeopleEditor ID="SdfPeoplePicker" runat="server" SelectionSet='User,SecGroup,SPGroup' />

I moved this page to _layouts folder on my SharePoint farm and name it PeoplePicker.aspx. Then on my page/app I just added a pointing to that aspx. That's it. I know it's ugly as hell and is clearly not the best solution, but at least it solves my problem. If some day my brain becomes strong enough to handle the craziness behind the peoplePicker generated code, I will share the proper solution. Thanks for your help eirikb

share|improve this answer
By the way, any comments or suggestions are more then welcome! – João Gala Louros Oct 3 '12 at 20:00

You can inject the correct markup directly into the DOM, I have tested this myself and it works perfectly. The People Picker does not depend on any document ready or similar. All you have to do is follow the correct markup and include the file entityeditor.js which you will find in the layouts folder.

Another option is to use the Client Object Model to mimic the behavior, and use OpenPopUpPage on /_layouts/Picker.aspx. You might need the whole query string for PickerDialogType, but by opening the original dialog you will see what query strings you must include.

share|improve this answer
So you just had to create the proper HTML skeleton, include entityeditor.js and that's it? I check the HTML sent to generate a datepicker and it creates a bunch ridiculous JS functions like __Dialog__StupidIdName. So I was wondering how could you get this out of the box. – João Gala Louros Oct 2 '12 at 20:49
You mean the JS function arguments, not the functions themselves right? In any case yes I believe you could just trim those down, but make sure you update the ones with $ instead of _ as well – eirikb Oct 3 '12 at 5:05
Sorry you are right, I need to look into it – eirikb Oct 3 '12 at 5:17
Ok I see the functions, pretty stuff. I believe you have to extract and include these yourself. They are written directly out into the page (for example in NewForm.aspx). You also need to search/replace the names in all of them. I believe it should be possible to make these a bit more general though, so if you happen to do it maybe others would be interested – eirikb Oct 3 '12 at 5:23
It would be awesome if you put your code (or a solution) on codeplex/github/gitorious or similar. ❤ – eirikb Oct 3 '12 at 13:57

I have a client side jQuery/SPServices/jQueryUI plugin that can do this for custom UI's. Take a look here:

I use it today in a custom UI I created for some projects.


share|improve this answer
Thanks Paul, I will also take a look at your solution. Obrigado! – João Gala Louros Oct 3 '12 at 21:12

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.