6

In SharePoint 2013, I want to delete all existing values in a people picker field using javascript or jquery.

Simply using .removeAttr('value') or .val("") does not work.

13

scenario:

when you enter form editing and has some user of this picker people, this is the "oldHtml"? (I'm finding this a bad practice)

try using this code:

var getIDPeoplePicker=$("div[Title='Column Name of the people picker here']").id;
var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[getIDPeoplePicker];
var usersobject = ppobject.GetAllUserInfo();
  usersobject.forEach(function (index) {
   ppobject.DeleteProcessedUser(usersobject[index]);
  });

with this code will get id of the PP, People Picker Object, All users in specific PP and loop All users for deletion, and clear the field perfectly without edit html page. And you can add this code to button "Clear Field".

but before of use code, check your people picker id correctly.

Hope this helps.

5

Proposing some other solutions...

Given that you have a people picker called ppobject:

var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict["my_peoplePicker_TopSpan"];

To delete the last user in the people picker, you can call

ppobject.DeleteProcessedUser()

This is ultimately what's happening in the accepted answer, for as many times as there are users (usersobject[index] is undefined because index is the user object itself, not a field within usersobject).

Could be simplified as:

while (ppobject.TotalUserCount > 0) {
    ppobject.DeleteProcessedUser();
}

DeleteProcessedUser() is really looking for an HTML element as the argument, so another option is:

ppobject.IterateEachProcessedUser(function (index, user) {
    // could add some filtering, e.g.,
    // if (!/@mydomain.com$/i.test(user.UserInfo.EntityData.Email))
    ppobject.DeleteProcessedUser(document.getElementById(user.UserContainerElementId));
});

Lastly, I found that after the last user is deleted, it will not show the initial help text -- you could use:

//if (ppobject.TotalUserCount == 0)
document.getElementById(ppobject.InitialHelpTextElementId).style.display = 'inline';
2

Assuming the name of people picker field is "user" then to clear do following

var oldhtml = ''

$(document).ready(function() {
    //Saving how the initial picker control without any selection
    oldhtml = $('div [id^="user_"]').html();
});

//To clear People Picker
$('div [id^="user_"]').html(oldhtml);

Note - This code is not tested. The logic is to save the HTML content of the picker control and reapplying saved html as part of clear process.

  • Thank you!! This worked with a caveat...Basically I needed the people picker populated on save so a workflow can run against it. But, when the form is opened in edit mode the next time, I wanted it cleared out. I did the following...I grabbed the empty people picker html on a new item (before it is ever populated) and placed it in a mutli line text hidden field. I had to allow the multi line text field to contain long values. Not sure if that's dangerous? Anyhow, when the item loads the next time, it simply grabs the empty PP HTML saved in the field, and resets it. I will post my code. – Das Oct 24 '14 at 13:10
  • No problem. I can't edit my comment, but I meant "you could help me understand" - did not want to imply there was anything wrong with your understanding! – Dinerdo Oct 24 '14 at 20:02
0

To expand on my initial post...

The goal was to use a People Picker (PP) field to send emails using a workflow, but to clear out the PP field the next time it is edited. In order to do this I expanded on Amal's answer.

Hidden field created: Multi-line Text allowing long values in Doc library called "storeHtml".

If the new form has not been submitted yet, you can capture the empty PP field HTML - thanks to Amal for this idea! I grab this data based on a the field "DateSubmitted" being empty. Once "DateSubmitted" is no longer empty, I know it's not a new item anymore. I also know that once "DateSubmitted" is populated, I need to clear the PP field.

var dateSubmitted = $("input[id^='DateSubmitted']").val();    
if(dateSubmitted == '') {
    //capturing empty PP Html and putting into field
    var emptyPpHtml = $("div[id^='myPpField']").html();
    var storeHtmlField = $("textarea[title='storeHtml']");
    storeHtmlField.val(emptyPpHtml);
}else{
     //clearing out the PP when edit form opened
    var getEmptyPpHtml = $("textarea[title='storeHtml']").val();
    $("div[id^='myPpField']").html(getEmptyPpHtml);
}
  • Unfortunately, with testing, I've found this solution to be unreliable. It doesn't work every time. :( Any better solutions out there?? – Das Oct 28 '14 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.