People Picker Name or Title from Camel Query

Question

People Picker Name or Title from Camel Query

Sajith Gopalakrishnan Hema 1,056

People Picker ID is fetched from the Camel Query using SPFx. How to get the Name and Title of the person to display in the page ?

2 answers

Your answer

Answer 1

RaytheonXie_MSFT 40,471 Microsoft External Staff

Hi @Sajith Gopalakrishnan Hema

I will recommend you to use Office UI Fabric to display person in the page. You can refer to the following code

react-peoplepicker

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Sajith Gopalakrishnan Hema 1,056 Reputation points

2023-02-14T13:30:05.8566667+00:00

Before using the Office UI Fabrics, we would like to get the Name, Email address of the user from the People Picker ID

RaytheonXie_MSFT 40,471 Microsoft External Staff

Hi @SGH,

You can use following js code to retrieve user information

function getUserInfo() {      
	// Get the people picker object from the page.
	var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

	// Get information about all users.
	var users = peoplePicker.GetAllUserInfo();
	var userInfo = '';
	for (var i = 0; i < users.length; i++) {
		var user = users[i];
		for (var userProperty in user) { 
			userInfo += userProperty + ':  ' + user[userProperty] + '<br>';
		}
	}
	$('#resolvedUsers').html(userInfo);

	// Get user keys.
	var keys = peoplePicker.GetAllUserKeys();
	$('#userKeys').html(keys);         
	// Get the first user's ID by using the login name.
	getUserId(users[0].Key);
}

// Get the user ID.
function getUserId(loginName) {
	var context = new SP.ClientContext.get_current();
	this.user = context.get_web().ensureUser(loginName);
	context.load(this.user);
	context.executeQueryAsync(
		Function.createDelegate(null, ensureUserSuccess), 
		Function.createDelegate(null, onFail)
	);
}

function ensureUserSuccess() {
	//createitem(this.user.get_id());
	$('#userId').html(this.user.get_id());
}

function onFail(sender, args) {
	alert('Query failed. Error: ' + args.get_message());
}

RaytheonXie_MSFT 40,471 Reputation points Microsoft External Staff

2023-02-27T05:51:02.77+00:00

Hi @SGH,

Would you tell me whether your issue has been resolved or have any update?

I am looking forward to your reply.

Have a nice day!

Thanks,

Raytheon Xie

Answer 2

Sajith Gopalakrishnan Hema 1,056

We are getting the People Picker ID using Camel Query. Before using the Office UI Fabrics, we would like to get the Name, Title, Email address of the user using the ID. Is there any option ?

Share via

People Picker Name or Title from Camel Query

2 answers

Your answer