Thursday 13 February 2014

Accessing People Editor control using jQuery in SharePoint

Dear Readers,

Recently I came across a requirement where I had multiple people editor controls on the page and I had to fetch the login name of the resolved user corresponding to each of these people picker controls. My requirement was to fetch all these login names using javascript or jquery. Now I tried all the old convention methods that used to work when we have only one people picker on the page. To my surprise, even if I provide the id corresponding to the respective people picker, the conventional javascript methods used to return the value of the first people editor only. So, in nutshell, none of the conventional methods worked for me.
So, I started exploring how does these people editor controls render on the page. Now, using IE developer tool, the html that came in front of me was very complex. Lot of spans and divs are rendered for just one single people editor control. But in its complexity was the simplicity of the solution that laid behind my eyes in that html code in front of me.

For my kind readers out here, I am pasting the html snippet for one of my people editors on the page.


So if you look at this code snippet, you see that a div with the id ending with 'peopleEditorProductOwner_upLevelDiv' gets generated for my people editor.

var htmlPeopleEditorControl = $("[id$='peopleEditorProductOwner_upLevelDiv']");

The html that gets returned based upon this element has a div with id "divEntityData" and an attribute "key" which holds the value for the account name.


So based upon this we can find the account name for all the people editor controls on the page.

Below is the sample jquery snippet to fetch the same for one control.

var accountName = $("#divEntityData", htmlPeopleEditorControl).attr("key");

where 'peopleEditorProductOwner' is the people editor id of my control.

Similarly for all other people editor controls on the page, you can fetch the login name.

Hope this piece of information might be helpful.

Cheers,
Geetanjali

5 comments:

  1. I needed a way to check if two people picker fields are resolved and this helped me so thank you very much!

    ReplyDelete
  2. Hi Geetanjali,

    Can you write a post on how to resolve multiple users from a people picker please?

    ReplyDelete
  3. Hi Geetanjali,

    Can you write a post on how to resolve multiple users selected in a people picker field please?

    ReplyDelete
    Replies
    1. Hi,

      Did you get answer for multiple users value in a people picker field?

      Delete
  4. can anyone suggest me how to get the user description from a multi people editor control using jquery

    ReplyDelete