Monday, January 21, 2013

Reset-Set-validate-Resolve Sharepoint people picker By javascript


SharePoint 2010 people picker is a very useful control to be used on your custom forms or custom visual webparts to select people within your corporate .

Some of the clients requirements would specify to preload  this field with some values by default as the current logged in user , ok what about doing this in the client side , Now everyone is going towards the client side operations , we do not want to exhaust the server those operations.

People picker could be handled by javascript methods:

To Reset  the people picker value you could use:

   1:  function ResetPP() {
   2:          var identifier = '<%= PeoplePicker.ClientID%>';
   3:          var value = '';
   4:          var tags = document.getElementsByTagName('DIV');
   5:   
   6:          for (var i = 0; i < tags.length; i++) {
   7:              var tempString = tags[i].id;
   8:              if ((tempString.startsWith(identifier)) && (tempString.indexOf('_upLevelDiv') > 0)) {
   9:                  tags[i].innerHTML = value;
  10:                  break;
  11:              }
  12:          }
  13:      }


To Set the People Picker with a certain value:
to use it something like :

   1:  SetPP('<%=PeoplePicker.ClientID%>', 'sps\administrator');
 
The Method:

   1:  function SetPP(identifier ,value) {
   2:   
   3:          var tags = document.getElementsByTagName('DIV');
   4:   
   5:          for (var i = 0; i < tags.length; i++) {
   6:              var tempString = tags[i].id;
   7:              if ((tempString.startsWith(identifier)) && (tempString.indexOf('_upLevelDiv') > 0)) {
   8:                  tags[i].innerHTML = value;
   9:                  break;
  10:              }
  11:          }
  12:      }
 
Find if the People Picker is resolved:

   1:  function IsPeoplePickerValueResolved() {
   2:          var eEntityData = $("div[id='divEntityData']");
   3:          if (eEntityData.length > 0) {
   4:              var isResolved = eEntityData.attr("isresolved");
   5:              return (isResolved == "True");
   6:          }
   7:          return false;
   8:      }
 
Validate the People Picker:

   1:  function ValidateOwner(PeoplePickerOwner, PeoplePickerContextName) {
   2:          if (!ValidatePickerControl(PeoplePickerOwner.id)) {
   3:              ShowValidationError();
   4:              return false;
   5:          }
   6:          var arg = getUplevel(PeoplePickerOwner.id);
   7:          var ctx = PeoplePickerOwner.id;
   8:          EntityEditorSetWaitCursor(ctx);
   9:          WebForm_DoCallback(PeoplePickerContextName, arg, EntityEditorHandleCheckNameResult, ctx, EntityEditorHandleCheckNameError, true);
  10:          return false;
  11:      }
 
To use this method you can use the following:


   1:  var PeoplePickerOwner = document.getElementById('<%= PeoplePicker.ClientID %>');
   2:  var PeoplePickerOwnerHiddenSpanData = document.getElementById('<%= PeoplePickerOwner.ClientID + "_hiddenSpanData"%>');
   3:  var PeoplePickerContextName = $("#" + PeoplePickerOwnerHiddenSpanData.id).attr("name").replace("$hiddenSpanData", "");
   4:   
   5:  ValidateOwner(PeoplePickerOwner, PeoplePickerContextName);
 
To call the "Click" the check names button:

   1:  function ClickCheckName() {
   2:          document.getElementById('<%=PeoplePicker.ClientID%>' + "_checkNames").click();
   3:      }

4 comments:

  1. Everything but how to obtain the values from the people picker. Why resolve it if you can't use the information? The divEntityData div tag contains the people picker information if resolved but only the first one on the page. Serious lack of functionality.

    ReplyDelete
  2. Hi,

    document.getElementById('<%=PeoplePicker.ClientID%>' + "_checkNames").click(); this line of code is not working in MOSS 2007, could you please let me know which code should i use for MOSS 2007 to click on people picker checknames image.

    ReplyDelete
    Replies
    1. Sorry, I did not try it on MOSS 2007, but I think It would be a difference of implementation on the people picker between MOSS 2007 and SP 2010, Just inspect the check user button on the browser and see the difference on the IDs between 2007 & 2010 ... and I'll try to find a MOSS 2007 environment to try this code on... If I had any updates I'll let you know.

      Sorry for late reply

      Delete
    2. $('a[id*=PeopleEditorSecondary_checkNames]').click() will do in short

      Delete