USING MULTIPLE PEOPLEPICKER’S IN SHAREPOINT 2013 HOSTED APP WITH ANGULARJS MVVM

copyright from: http://www.jeremythake.com/

So I’ve been cranking out more features for my App that I’m going to be walking through at #SPC14. There is great a great sample Visual Studio 2013 Project that shows how to use the PeoplePicker in a SharePoint 2013 Hosted App. Hats off to the team on the content and the code samples that are out there really help to get you started and see how things hang together. Where I found the code sample (and the MSDN page) fell short was how to support multiple PeoplePicker’s on one page.

I am building out a App for the Store that will render List Items which has a inline edit mode and I needed a People Picker for each item shown. I’ve built this using a view and then binding it to the collection of List Items I get back from my REST query which I discussed in my last post.

There were a few steps I had to take to get this going:

Step 1 – reference the JavaScript files

I had to use the ScriptLink to pull in the relevant JavaScript files, I found that the top 4 I hadn’t referenced already in my App and aren’t there in a net new project by default:

1 2 3 4 5 6 7 8

<SharePoint:ScriptLink name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false" />     <SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false" />     <SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false" />     <SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false" />     <SharePoint:ScriptLink name="sp.RequestExecutor.js" runat="server" LoadAfterUI="true" Localizable="false" />     <SharePoint:ScriptLink name="sp.js" runat="server" LoadAfterUI="true" Localizable="false" />     <SharePoint:ScriptLink name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false" />     <SharePoint:ScriptLink name="sp.core.js" runat="server" LoadAfterUI="true" Localizable="false" />

Step 2 – Add the PeoplePicker DIV Element

At first it looks odd to just be adding a DIV to a page that is a control used in a form, but low and behold it works. You’ll notice that I’m adding it as a JavaScript string to my View that I had blogged about earlier this month. Not that I have added the “{{todo.id}}” to the ‘id’ attribute of the DIV, this ensures each DIV is unique based on the ID of the List Item.

1 2 3 4

'       ' +             '        Assigned To:' +             '         ' +             '       '

+

I did try and bind it to the ng-model of the List Item ‘AssignedTo’ element like my other Edit Form fields, but unfortunately the nature of this control doesn’t work like that.

Step 3 – Hook up the Edit click to bind to the model

I had to call the initializePeoplePicker function and pass in the DIV name, which you can see is appended by the unique ID of the List Item. I pass in the AssignTo Display Name and User Name also. I decided only to call this as and when it went into EditMode rather than calling this up front for the hidden DIVs.

1 2 3 4 5

scope.edit = function () {                 scope.editMode = true;                 previousValue = scope.todo;                 initializePeoplePicker('peoplePickerDiv' + scope.todo.id, scope.todo.assignedTo, scope.todo.assignedToName);             };

Step 4 – Modify the initializePeoplePicker

I had to tweak this method that was provided in the code sample to cater for multiple PeoplePicker DIVs on the page.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

// Render and initialize the client-side People Picker. function initializePeoplePicker(peoplePickerElementId, displayName, userName) {       // Create a schema to store picker properties, and set the properties.     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 = null;       if (displayName != null) {         users = new Array(1);         var user = new Object();         user.AutoFillDisplayText = displayName;         user.AutoFillKey = userName;         user.AutoFillSubDisplayText = "";         user.DisplayText = displayName;         user.EntityType = "User";         user.IsResolved = true;         user.Key = userName;         user.ProviderDisplayName = "Tenant";         user.ProviderName = "Tenant";         user.Resolved = true;         users[0] = user;     }     // Render and initialize the picker.     // Pass the ID of the DOM element that contains the picker, an array of initial     // PickerEntity objects to set the picker value, and a schema that defines     // picker properties.     SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, users, schema); }

The key with the above function is that I set the users variable to null first and only populate it if I pass in a user name. This means that the PeoplePicker will be empty if no User name is assigned to in the List Item. I also set MultipleValues to false as I only want one User in the AssignedTo.

Step 5 – tweak getUserInfo(id)

I also tweaked the getUserInfo function so that it can find the DIV based on the unique ID of the List Item and then return the UserInfo variable.

1 2 3 4 5 6 7 8 9 10 11 12 13

// Query the picker for user information. function getUserInfo(id) {     var fieldName = 'peoplePickerDiv'+ id +'_TopSpan';       var peoplePickerDiv = $("[id$='" + fieldName + "']");       // Get the people picker object from the page.     var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];       // Get information about all users.     var users = peoplePicker.GetAllUserInfo();     return users[0]; }

 Step 6 – formatting the UserInfo so JSOM (Javascript CSOM) can parse it

One of the big things that blocked me for a while was how to convert the UserInfo object to something that the JSOM List Item Update() would understand. I leveraged the ‘SP.FieldUserValue.fromUser’ and passed in the UserInfo relevant information (format was ‘domain\\username’.

Note that I also update the ng-model binding for the assignedTo there also with the Display Name.

1 2 3 4 5 6 7 8 9 10

var user = getUserInfo(scope.todo.id);                 if (user['DisplayText'] != null)                 {                     var users = new Array();                     users.push(SP.FieldUserValue.fromUser(user['Description']));                     scope.todo.assignedTo = user['DisplayText'];                     scope.todo.assignedToName = user['Description'];                     listItem.set_item('AssignedTo', users);                 }                 listItem.update();

Wrapping Up

If you’re coming to the SharePoint Conference 2014, I look forward to seeing you there. I encourage you to come to my session as these are only tidbits into a much deeper discussion on the journey I took to build this SharePoint Hosted App with AngularJS for the Office Store.