SOLVED

Get user name using List view component?

Regular Contributor

Hi,

I am trying to get the user name (display name) from a people column in a spfx web part using the List view component but I am getting undefined. 

The column calls SalesManager (internal name) and I am fetching its data like this:

 

const items = await sp.web.lists.getById('823e0102-5928-4f8a-bcda-f1794bd9026b').items
.select(select)
.get();
items.forEach(item => {
Agreements.push({
SalesManager: item.SalesManager,
});
});

And then unsing the received data like this:

 

private viewFields: IViewField[] = [
{
name: "SalesManager",
displayName: "Sales Manager",
isResizable: true,
}];

In the render method: 

<ListView
items = {this.state.agreements}
/>

There are more items that shows in the list view but SalesManager is the one that is causing problems. 

 

When I take a look to the console the SalesManager is undefined. 

 

How can I get the display name? Do I need to do something special in the fetching part ? 

Best regards

Americo

9 Replies
best response confirmed by Americo Perez (Regular Contributor)
Solution

@Americo Perez Can you share what your select value is? Person field is complex field type, that you need to select the properties and expand on the field.

 .select('SalesManager/FirstName, SalesManager/LastName').expand('SalesManager')

Tahanks @Beau Cameron , right now I am selecting everything:

public async getAgreements(): Promise<Agreement[]> {
let select = '*';
let Agreements: Agreement[] = [];
const items = await sp.web.lists.getById('823e0102-5928-4f8a-bcda-f1794bd9026b').items.select(select).get();
items.forEach(item => {
Agreements.push({
Title: item.Title,
AgreementName: item.Title,
CustomerAgreementNr: item.CustomerAgreementNr,
AgreementType: item.AgreementType,
SalesManager: item.SalesManagerId,
ContactPerson: item.ContactPerson,
DeliveryType: item.DeliveryType,
AgreementStartDate: item.AgreementStartDate,
AgreementEndDate: item.AgreementEndDate,
AgreementEnded: item.AgreementEnded,
LastPriceAdjustment: item.LastPriceAdjustment,
NextPriceAdjustment: item.NextPriceAdjustment,
});
});
return new Promise<Agreement[]>(async(resolve) => {
resolve(Agreements);
});
}

Regards!

@Americo Perez I can see that, but that is not how the REST call works. It's a complex field type that you need to expand on to get it's values.

Thanks @Beau Cameron , now can I render the names.

 

Just one last thing, the title column should show the name of the item linking to the item it self but in my case the title shows as a single text, the link is missing, do I need to do something special to render the title linking to the item? 

 

Regards!

@Americo Perez The title is just a text field.  You can construct the URL via the URl to the Form + the ID of the item if you want.

Thanks, @Beau Cameron 

 

I've tried to build the url but I can't set the ID in the url

 

This is how the url looks like:

https://tenant.sharepoint.com/sites/Demo2/Lists/AgreementDatabase/DispForm.aspx?ID=1

And in my code I am trying like this:

 

render: (item: IList) => {
return (<a href={`https://tenant.sharepoint.com/sites/Demo2/Lists/AgreementDatabase/DispForm.aspx?ID=${item.Id}`}>{item.Title}</a>);
}

 

but I am getting undefined in the item.Id  :\ 

I can see in the console the right ID when I set the console just before the return statement but I don't know why is not getting passed to the url

 

Regrards

@Americo Perez Are you selecting the Id column from the original  item in your select query?

I found the problem.

I was fetching item.id and the right one is item.Id 

 

Now is working

 

 

Thanks for the answer.