How to get the selected "Person Type" (user or group) from the Microsoft Graph Toolkit People Picker control in javascript?

Question

The javascript Microsoft Graph Toolkit people picker control has an event called "SelectionChanged" that is raised when a user or group is selected in the people picker. It also has a property called "selectedPeople" that list the users and groups that have been selected. Both the event and the property return an array of IDynamicPerson objects.

The problem that I have is that I cannot find a way to distinguih between users and groups. The IDynamicPerson interface does not offer a property to distinguish them. Does anyone knows how to distinguish the users from the groups on the returned IDynamicPerson array?

Answer 1

From this doc, there is personType property which you can use to distinquish

Something like this when handling the event.

const handleSelectionChanged = (event) => {
const selectedPeople = event.detail;

const selectedUsers = selectedPeople.filter((person) => person.personType === "User");
const selectedGroups = selectedPeople.filter((person) => person.personType === "Group");

// Now you have separate arrays for selected users and groups.
console.log("Selected Users:", selectedUsers);
console.log("Selected Groups:", selectedGroups);

};

document.querySelector('mgt-people-picker').addEventListener('selectionChanged', handleSelectionChanged);