People Picker widget - Sample

[shankarnss]

Hi Paul,

It is a very nice article and you have done excellent Job. I am currently interested in the people picker control. I copied the whole demo with src into SharePoint site pages library and People picker works wonderful. Is there a simple example of People picker with just an input control and reference to libraries?

I was unsuccessful in implementing using one of your links (https://github.com/purtuga/SPWidgets/tree/master/src/peoplePickerWidget)

What am i missing?

With regards, Shankar

[purtuga]

@shankarnss I'm not sure I follow... Your link is directly to source and unless you are looking to use RequireJS, it will not work out-of-the-box. Have you followed the instruction on the Help for this widget? (here) - Look at the section titled "Usage" right at the top of the page... It has a sample of what you should be putting into your page, including loading the dependencies.

Once you get that working, then you might want to look at the API for the pickSPUser widget... I just noticed that the project site is missing that widget, so look here until I fix it: https://github.com/purtuga/SPWidgets/blob/master/documentation/SPWidgets.pickSPUser.md

[shankarnss]

Hi Paul,

Thank you very much for the help. I was able to get it up and running. I had a question pertaining to fetching the people picker control with the user profile. I have an edit screen which gets populated based on the list item. I tried setting the field using the following two options but I was not successful.

1) $("#txtUser").val("domain\Username"); 2) $("input[name='userProfile']").val("domain\Username");

I did try passing the UserProfileID and still no luck. Kindly help me to populate th user field in the people picker control.

With regards, Shankar

[purtuga]

I think you are trying to set the SPWidget peoplePicker widget input field to a specific person, correct?

The widget has a method called "add", which can be used to add a specific user to it... See the documentation, under Methods.

Example:

Initialize the People picker field:

var $input = $("input[name='userProfile']");

Now add a user to it... you need to use the internal ID of the user:

$input.pickSPUser("method", "add", '4;#John Smith');

I believe that using only the ID will also work.

[dafunkphenomenon]

Hi

If I follow the instructions on the usage here the widget appears and I can search for people. If I try and add it to an existing DOM element as described under the usage down under the widget section $("input[name='users']").pickSPUser();

it doesn't do anything, nothing is returned when I search for people and nothing is logged in the console.

Do you have any idea why this might be?

Thanks

[purtuga]

Can you post your full code usage example? Include the order of the dependencies needed.

It sounds like you see the input field on the page - correct? But when you type a name, you don't see suggestions is that right?

Note: The sample in the documentation demonstrates usage of the widget. There is other stuff you need to do to ensure you have your UI setup correctly.

/Paul

Paul T.

-- Sent from Mobile

[dafunkphenomenon]

<link rel="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" /

The above shows the input (obviously) but doesn't do anything when I type.

I've tried wrapping the above in a jQuery document ready call but that doesn't seem to make a difference.

As I say if I take your code (below) it works

Thanks

[purtuga]

What version of Sharepoint?

And you said: no errors in the console? Is the code to set the picker even running? Put a break point in the debugger and see it it's actually being called.

Also: how are you injecting this into the page? Content Editor web part?

/Paul

Paul T.

-- Sent from Mobile

[dafunkphenomenon]

It's 2010.

No errors, It hits the breakpoint inside document ready yes.

The content is an a html page being called from CEWP.

[purtuga]

Ok ok ok. You have me stumped. Your setup looks good. The only questionable part is loading a CSS from that location - that usually goes into the HEAD element. But the suggestions should still appear.  When you type in the input (more than 3 chr) - do you see any network calls to the Sharepoint API in the dev tools?  I'll see if I can take your code as is and run it myself. 

And just to confirm again (sorry): no errors in the console, correct. 

Paul -- sent from mobile

[dafunkphenomenon]

No errors in console, correct.

I'll check the network and get back to you

[dafunkphenomenon]

Ok found it.

I didn't realise that the code with the input I was trying to bind to was in an angular partial view.

I was trying to do a quick win.

Thanks for your help