Auto-populate columns based on Person lookup

Hi, I'm trying to figure out how to make certain columns as auto-populate from person selected. For example, if user select the person name, the designation and department name is auto-fill from the directory.

image

Hello @noorshahida88!

You can get selected user properties, for example, Department, with this code, where {PeoplePickerField} is the internal name of the field.

console.log(fd.field("{PeoplePickerField}").value.EntityData.Department);

To see all available user properties, please use the code below.

fd.spRendered(function() {
  pnp.sp.profiles.myProperties.get().then(function(result) {
  var props = result.UserProfileProperties;
  console.log(props);
  });
});

Hello @mnikitina,

I tried but looks like nothing happen.

My {PeoplePickerField} internal name is EmployeeName while for Department is ol_Department and Designation is Designation.

Once I selected the {PeoplePickerField} field, the fields for Department and Designation still same, blank.

@noorshahida88,

Please use the provided code line under the on-change event to set the field values once the person selected. Please have a look at Events article for more information.

Note that you need to change Department and Title to the required propertie name.

  fd.spRendered(function() {
    fd.field('EmployeeName').$on('change', function(value) {
    fd.field('ol_Department').value = fd.field('EmployeeName').value.EntityData.Department;
    fd.field('Designation').value = fd.field('EmployeeName').value.EntityData.Title;
    });
  });
1 Like

@mnikitina i able to get the details now except for manager name not successful.

@noorshahida88,

Could you please send me the screenshot of available properties from the console when running the below code.

Thank you!

fd.spRendered(function() {
  pnp.sp.profiles.myProperties.get().then(function(result) {
  var props = result.UserProfileProperties;
  console.log(props);
  });
});

@mnikitina,

This is before I added the latest code:

This is after I added the latest code:

This is all console log:
CoSecReq-ConsoleAll.txt (2.8 KB)

I want to get the manager name display in ApprovedBy field.

@noorshahida88,

Please use the below code under the on change event handler to get the user's manager.

Replace 'EmployeeName' and 'ApprovedBy' with Internal names of the fields.

pnp.sp.profiles.getPropertiesFor(fd.field("EmployeeName").value.Key).then(function(result) {
 var props = result.UserProfileProperties;
 for(var i = 0; i < props.length; i++){
     if(props[i].Key == "Manager"){
         fd.field("ApprovedBy").value = props[i].Value;
         break;
     }
   }
 });

Hi @mnikitina, are you sure "Manager" is the correct key to get the manager field because the field is still blank after I paste this code. FYI, EmployeeName and ApprovedBy are the internal names for my fields already, so I did not change anything.

fd.spRendered(function() {
pnp.sp.profiles.getPropertiesFor(fd.field("EmployeeName").value.Key).then(function(result) {
var props = result.UserProfileProperties;
for(var i = 0; i < props.length; i++){
if(props[i].Key == "Manager"){
fd.field("ApprovedBy").value = props[i].Value;
break;
}
}
});
});

@noorshahida88,

You need to use the code under the on-change event of the 'EmployeeName' field. The same way you did with Department and Designation user properties.

So the code will be as below.

  fd.spRendered(function() {

    //executes the below steps on field change
    fd.field('EmployeeName').$on('change', function(value) {

      //gets properties of the selected user 
      fd.field('ol_Department').value = fd.field('EmployeeName').value.EntityData.Department;
      fd.field('Designation').value = fd.field('EmployeeName').value.EntityData.Title;

      //gets manager name of the selected user
      pnp.sp.profiles.getPropertiesFor(fd.field("EmployeeName").value.Key).then(function(result) {
          var props = result.UserProfileProperties;
          for(var i = 0; i < props.length; i++){
            if(props[i].Key == "Manager"){
            fd.field("ApprovedBy").value = props[i].Value;
          break;
            }
          }
        });

     });
     
  });
2 Likes

Thanks @mnikitina, my coding skills is not good :sweat_smile: Thanks a lot!

1 Like

The above code works fine when the people picker field is NOT set to allow multiple selections.
@mnikitina: what code would we use if we permit multiple selections for the people picker/person SharePoint Field?

Thanks,
Stormanh

Hello @stormanh,

For example, to get the Department of the first user in the People Picker field with multiple users, please use the following code.

fd.field('PeoplePickerField').value[0].EntityData.Department;

And to see the Departments of all selected users you need to use the below code.

    //executes the below steps on field change
    fd.field('PeoplePickerField').$on('change', function(value) {
        var user = fd.field('PeoplePickerField').value;      
        for(var i = 0; i < user.length; i++) {
            //gets properties of the selected user
            console.log(user[i].EntityData.Department);
            break;     
            }       
     });

Thank you @mnikitina! :grinning:

1 Like

@mnikitina
Can you help me for setup the Auto Auto populate field when enter the Assigned To Name then we need to auto populate Title, User ID and department flied
image