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!

Advertisements