Custom field rendering in modern list views

Microsoft

Hi SharePoint Developers,

 

We're working hard on making modern lists and libraries more extensible.  One feature that we're working on right now is a SharePoint Framework component that allows you to customize the rendering of fields inside modern list views.  In other words, this is a modern version of the classic Field.JSLink extensibility point.  We want to work with you guys on fleshing this out and enabling real scenarios that are currently blocking modern adoption. 

 

We'd like to gather more real-world examples of how people are customizing fields inside list views today.  Please help us out!  To get things started, below are a few field customization patterns that we're aware of and are considering how we can make them work with this new framework component.   We want to hear from you examples of scenarios that fit one of these patterns as well as scenarios you've encountered that are totally different.

 

Conditional formatting.  This is applying a different style to a field depending on its value.

Example:  I have a number field in a custom list called "KPI."  I want values between 0-20 in this field to be shown in the list view as red; 21-40 as yellow; 40+ as green. 

 

Supplementing the output of a field with more information.  This is displaying additional data inside a field alongside the data that's displayed by default.

Example:  I have a person/group field that stores contact information.  I want to display the name of the person's division next to their name.

 

Inserting links to actions.  This is placing links to actions on a list item within that list item's row.  Think of this as like a URL-based customaction, but the action is invoked by clicking the action's URL in the view instead of selecting that item and clicking a button.  We've heard that sometimes it's easier to train people to click a link in a row than it is to train them to select the item and find the right button in our menus.

Example:  I have a field in a document library called "Kick off Approval Workflow."  Client side code constructs a URL that kicks off an approval workflow (in SharePoint or in another system) for the item in question and places that URL inside that column.

 

40 Replies

Hi Lincoln, any update on the ability to format list items? Thanks for your hard work here!