When creating my "Sharepoint Hosted" App for Office365 (15) I had to use the client-side People Picker control in the App Part. There doesn't appear to be much in the way of documentation for this control other than the "How to" MSDN document here:
How to: Use the client-side People Picker control in apps for SharePoint
I wanted to default the control to the current user. From the document I could tell that there was a parameter in the init function that should contain an array of initial PickerEntity objects, but sadly no example of this. The example code simply passed a null where this should be.
SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
I like to use the jQuery deferred function with the SharePoint asynchronous requests so that I have some control over my code executing in a sequential manner.
Here is a snippet of code that demonstrates how to default the People Picker control to the current user:
$(document).ready(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
})
function sharePointReady() {
context = new SP.ClientContext.get_current();
web = context.get_web();
getUser().done(function (user) {
var schema = {};
schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
schema['SearchPrincipalSource'] = 15;
schema['ResolvePrincipalSource'] = 15;
schema['AllowMultipleValues'] = false;
schema['MaximumEntitySuggestions'] = 50;
schema['Width'] = '280px';
var users = new Array(1);
var defaultUser = new Object();
defaultUser.AutoFillDisplayText = user.get_title();
defaultUser.AutoFillKey = user.get_loginName();
defaultUser.Description = user.get_email();
defaultUser.DisplayText = user.get_title();
defaultUser.EntityType = "User";
defaultUser.IsResolved = true;
defaultUser.Key = user.get_loginName();
defaultUser.Resolved = true;
users[0] = defaultUser;
SPClientPeoplePicker_InitStandaloneControlWrapper('peoplePickerDiv', users, schema);
});
}
function getUser() {
var dfd = $.Deferred(function () {
user = web.get_currentUser();
context.load(user);
context.executeQueryAsync(
function () {
dfd.resolve(user);
}),
function () {
dfd.reject(args.get_message());
};
});
return dfd.promise();
}
This information is very helpful! I have been able to set up a client-side people picker in my sharepoint app form. But now, how should I retrieve the value that has been set? I need to take the value and update it to a list on the side (the list is not hosted in the app, in case that makes a difference) so how does that work?
ReplyDeleteAwesome post. I especially liked how you managed to prepopulate the picker with a default value. The MSDN docs did not cover that. Great job!
ReplyDeleteThanks for this; just a question : how to save the people picker value in a person or group field of a SP list? I not find how to retrieve the id of the user
ReplyDeleteVery clever!
ReplyDeleteI am trying to do this in the context of Client Side Rendering.
I want to prepopulate the people picker in a new form. The rub is how to initialize the people picker in the template override.
When I figure it out I'll post the solution.
my blog
Nicee share
ReplyDelete