Let's say we have a SharePoint list with such columns as Lookup, Choice, Hyperlink or Picture, etc. And we want to display items from this list in our SPFx web part. In this blog post I will use the list as shown below:
We want to display this list in our web part similarly to the OOTB rendering.
Getting the Items
First thing to do - we need to request the list items from SharePoint. There are several way how you can do that:
Using SharePoint REST API
Using Microsoft Graph
Using PnPJS library
I will use PnPJS. And to be more precise: getItemsByCAMLQuery method of IList object. This method allows to correctly get labels for Managed Metadata columns (selected terms). And this is required for the selected list. So, let's install PnPJS module to our project:
Now let's import all needed instances in our web part's ts file:
And let's request the items in web part's onInit method:
This request will return items in the format shown below:
As you can see, such columns as VisitedCountriesId, Picture and others are complex object with multiple properties. And we are additionally processing VisitedCountriesIds to add VisitedCountries property to contain array of lookup values.
PnP ListView component allows you to render collection of items. It is based on Office UI Fabric React DetailsList and allow to render items similarly to Office 365 experience. You have to provide a list of view fields as IViewField that describes what columns to render and list of items as any. You can read documentation on these parameters here. The problem with this controls is that it flattens the passed items. And for our example, for VisitedCountries it will create a separate property for each array member:
Such a format doesn't allow to correctly specify IViewField instance to render array. Good thing is - we can define render function for each column and provide custom rendering for a cell there.
PnP Field Controls were initially created to be used in SPFx Field Customizers to provide rendering of the fields similar to out of the box experience. But technically we can use them in web parts as well. And, as a result, we can use them to provide custom rendering for ListView cells.
So, let's use Field Controls in our ListView. And first thing - add all needed imports:
For Title and Experience (Choice) we will use simple FieldTextRenderer:
For date - FieldDateRenderer:
For the Picture (Hyperlink or Picture) we need to get 2 properties of the flattened item: Picture.Url and Picture.Description to use FieldUrlRenderer
Similarly, for JorneyType (Managed Metadata) we need JourneyType.Label and JourneyType.TermGuid to use FieldTaxonomyRenderer:
The most interesting part is VisitedCoutries. As this is a lookup column we want to displayed referenced item when user clicks on the lookup value. We can display this item either in a separate tab or in a popup. I will show the second option. So, first let's use FieldLookupRenderer to render the values and handle onClick:
And if selectedLookupId is set, we'll use one more PnP Reusable Control IFrameDialog to render list item display form as a dialog:
The constructed url parameter will look like that: https://tenant.sharepoint.com/sites/your-site/Lists/Journeys/DispForm.aspx?ID=item-id&IsDlg=1 The final code of the component:
And this is how our list will look:
And lookup popup:
As you can see it's pretty easy to combine different PnP Reusable Controls to work together. Using the same technique you can render other SharePoint column types like People or Group, multiline text, and others. As mentioned in the beginning of the post, you can find all the code here
That's all for today! Have fun! for today! Have fun!