SharePoint 2013 Client Side People Picker on Edit Form page

Recently I have been working on a project where I have added a Content Editor Web Part to an Editifs.aspx of a SharePoint List, and this references a JavaScript file which perform CRUD operations on a separate list. Just for some background – we went down this path because the primary list had too many columns so by breaking out some of the functionality into separate lists helped reduce the column count. However, this also introduced the requirement to enable CRUD operations on the separate list while in the main list and not introducing any postback which could potentially clear out any entries added to the main list. (Yes, main list has an InfoPath form – still hoping they’ll allow me to re-do the form in JavaScript).

Now – if you’ve accidentally stumbled upon this blog post you have probably already stumbled upon this MSDN article: https://msdn.microsoft.com/en-us/library/office/jj713593.aspx

Following along with the example, you will likely be able to create a new default.aspx page with some JavaScript file includes and be happy to see a people picker control on your page. But that’s not how you intend on implementing this control. So what do you do? If you’re like me you would probably try to include those JavaScript files in your App’s JS file – and then you will likely stumble upon a ton of errors about functions being undefined, etc. But there has to be an easier way, doesn’t there?

Here’s the steps..

1. Open up your site in SharePoint Designer

2. Navigate to your List and find the form which you want to add the People Picker control to – NewForm, EditForm, Editifs, etc..

3. Right click that form and select Edit in Advanced Mode
cspp-editform
4. Locate the PlaceHolderMain section of the form, and copy/paste the ScriptLink references referenced in the MSDN article. Save the form, it’ll prompt you that you are breaking from the Site Definition – go ahead, dance with the devil.
cspp-editform-scriptlink

5. Take the JavaScript code mentioned in the MSDN article and add it to a JSFile which you store somewhere in your site collection. Make sure to add an opening <script> tag before the JS, and if you don’t have jQuery already loaded make sure to include it.
cspp-msdncode
(This is just a snippet – you need to grab all the JS from the article)

6. In your browser, navigate to the EditForm

7. Add a Content Editor Web Part, and point it at the JS file you just created.
cspp-jsfile
8. Lastly, add a Script Editor webpart on that same Edit Form, and include just a tiny bit of HTML
cspp-div

9. Rejoice in all that is awesome when you have a People Picker control on your Edit Form page!!
cspp-formwithPP

Please remember to SharePoint responsibly!

  1. Hi thanks for writing this up! Have you been able to figure out how to add this directly into a customized form/ InfoPath form? In step #3, I see you are right-clicking on editifs.aspx which means it is a customized form. And then in step #9, the people picker is right above the customized form. I’m looking to see how to add this directly into InfoPath which I know isn’t an easy feat given the XSLT/XSD format. Let me know, thanks!

    Reply

    1. Hey Joel,

      So.. I’m not sure this approach would work with InfoPath. You really need to have a

      in order to initialize the People Picker. I’m not sure how you would drop a DIV into the InfoPath form to then render the People Picker, let alone for it to do anything useful. Why do you need to do that though? You can add a People Picker control to an InfoPath form..

      Thanks,
      -Jared

      Reply

  2. […] most part of the solution was taken from this Microsoft blog. I must also give credit to Jared Matfess, I assume that’s his name based on the URL to his blog […]

    Reply

Leave a Reply

%d bloggers like this: