People picker to show user details

Hi,

Is it possible to show user details in the people field from sharepoint? Something like the people picker:
image

Right now I only see the names and if possible, I would like to see email or UserIds.
image

Thanks.

1 Like

Dear @asmita_adh,
Just like with the Lookup field, you can customize the template for the Person/Group field.

Here's what the default template looks like, which you can adjust to fit your needs:

fd.spBeforeRender(function() {
    var template = '';
    template += '# if (data.EntityData.Email) { #';
    template += '<img alt="" src="' + fd.webUrl + '/_layouts/15/userphoto.aspx?accountname=#:data.EntityData.Email#&size=S" class="k-state-default photo" width="40" height="40" /># }';
    template += 'else { # <div class="initials" style="background:#= data._initialsColor #"><span>#: data._initials #</span></div> # } #';
    template += '<div class="ml-2 text-truncate">';
    template += '#: data.DisplayText #';
    template += '# if (data.EntityData.Title) { # <span class="d-block text-muted small">#: data.EntityData.Title # </span> # } #';
    template += '</div>';
    fd.field('User').widgetOptions = {
        template: template
    }
});

By default you should actually see person's Title or Email for the external users. Some users might not have this information available.

2 Likes

Thank you @Nikita_Kurguzov :slight_smile:
Solved my query!

2 Likes

Hey @Nikita_Kurguzov,
Expanding further on the question.

I was wondering if it is possible to filter on the data too. I saw that the select options do not completely get overwritten.

I tried to do the following:
template += '# if (data.Key.split("\\\\")[1].match(/[u][0-9]+/)) { #

But the problem with this is that all the fields between the values appear as empty lists.

I tried to hide the unmatched list elements with standard jquery but problem there again is that when I use the keydown, I can see all the names of the filtered people (in the options).
image --------->>> image

var listkItem = $('.k-item');
for(var ik=0; ik<listkItem.length; ik++){
      if (listkItem[ik].childElementCount == 0 ){
          console.log('--------');
          listkItem[ik].hidden = true;
       }
 }

Any idea on how I could solve this? Thanks :slight_smile:

Dear @asmita_adh,
Currently, the only option for filtering Person/Group field is found in the out of the box List Settings - Column Settings, where you can limit the field to a specific group:

If you want more flexibility, let us know what your requirements are, perhaps we'll be able to add more advanced filtering to the field in the future.