Corey Roth [MVP]

I’ve done quite a bit of work with the client-side People Picker in SharePoint-hosted apps lately.  I find that while it is relatively easy to get set up, I found it was quite easy to break.  I have found that it tended to work better in Office 365 than it does in on-premises SharePoint 2013.  I ran into two common issues. First, I found that after you did a query for users, you could not actually select the user.  The second related issue is that you could select the user, but the textbox would remain empty and not show the user’s name.

In my troubleshooting of the issue, I found that the behavior differed based on a variety of things including what user was using the page, how you authenticated, and which browser you were using.  When I was experiencing issues, I found that administrator users never had a problem.  That figures.  Low-privilege users would not be able to get the control to work.  Then I discovered that it would work for these users if they were not auto logged into the site with Internet Explorer.  Here, I am referring to the setting Automatic logon with current user name and password.  If the user typed in their credentials manually, it would actually work.  Quite strange.

After further investigation, I discovered that access to the spMgr object deep in clientpeoplepicker.js was coming back as undefined.  This turns out to be in a block of code that shows presence information for the user.  I found that if I disabled presence, it fixed the issue for users in Internet Explorer.  To disable presence, set ShowUserPresence to false on the SPClientPeoplePicker object.  Do this right before your call to SPClientPeoplePicker_InitStandaloneControlWrapper.

This resolved my issues in Internet Explorer.  However, Chrome was displaying some erratic behavior.  Sometimes the People Picker would work, but most of the time it still wouldn’t.  Although this technique worked for some browsers, I don’t think it was the final solution.  I found the final solution also in the debugger.  I reported the following error in clienttemplates.js:

Strings is not defined.

The odd thing is that the minified version of strings.js was actually included on the page automatically but it didn’t work for some reason.  Strings.js is the JavaScript file that contains all of the multilingual string resources for your current culture.  I included a hard reference to the US English version of the strings.js file in the 1033 folder. 

Once I did that, all of my People Picker issues were resolved.  You may want to correct culture code for the languages you use.