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 Team,

 

For most customers I've worked with so far, i think this covers quite a lot (80%) basic use cases.

If you take it much further, you're closer to building a business application, or custom pages etc.

I used the calculated column trick with HTML many times, although it was not ideal it worked out very nice.

 

Please consider the scenario in which for example a due date is highlighted in red. With the calculated column trick this was not possible becuase the column value was only calculated during an edit, and not real time during rendering.

 

Is there anytihing you can tell when (i know this is always hard..)  some of this functionality is expected to be available?

 

Thanks very much,

 

Jos

We agree that a simple scenario like highlighting a due date should not require custom code.  The calculated field trick was an unsupported hack, but it really demonstrated a need to accomplish simple customizations like this in a codeless way.  We are working on a documented, supported way to accomplish this, and more, but we have no timelines to announce yet.  There will definitely be more information on this by Ignite.

In regards to Conditional Formatting, i would like to suggest that you try to replicate the functionality provided in Excel for this and then try to duplicate Excels Number formating options. 

Please allow the calendars to display tasks with conditional formatting.
Thank you very much

Although unrelated to this thread, but would like to have 'breadcrumbs' in overall sharepoint.

 

Possibly small development but will have tremendous benefits, starting with lesser load on servers since users would not be scrambling through the stuff. Lesser clicks by directly going to desired "leaf" instead of doing back buttons and loading interim 'unwanted' pages etc.

 

Please guide if there is already something in place right out of the box. The 3rd party apps falls out of favour too soon to catch-up with the pace of fast moving office-365.

The recently announced Framework Extensions should be helpful for this when they become available, see https://dev.office.com/blogs/build-integrated-user-experiences-with-new-capabilities-of-sharepoint-a....

Thanks Lincoln, sounds good.
What is the best place to look for further updates on this item? This community?

Kind regards, Jos

A solution for conditional formatting of modern ui lists provided by Waldek Mastykarz

 

https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/js-field-conditionalformattin...

 

This feature is only available in the Dev-Version or in First Release mode (Setting in the Admin Center)

Cool

 

With (old) Microsoft CSR code you could do this with 10 lines of code

 

The new way of doing it requires 76 lines of code

 

So as a rull of thumb we can say conversion to the new stuff takes 8 x CSR ?

Seems to be the course of things. For me it's also much new stuff

I was able to do this in classic view with JS Script code. 

New list form: Hide particular fields

View list form: View those fields which are automatically filled via Microsoft Flow trigger.

Edit list form: Make those fields Read only.

So, the point is to modify list fields based on NEW/VIEW/EDIT form

Can I just, please, change the width of the Name field? I have one list in one site that I'm the only user of and the names are extraordinarily large because they are coming from Dynamics CRM. (Dynamics is concatenating the Organization Name with the GUID.) This is making data management quite difficult for me, a super user, with no time to learn JSON.

If it is only for you, then let your Browser make that change.

 

Install a Browser plugin like Stylish, which always applies the CSS on the loaded page:

 

 

table[summary*='Document'] tbody TD[class*='ms-vb-title'] DIV{
    background:pink;
    max-width:10em;
    overflow:hidden;
}

> Get the Table with 'Document' in the name

> goto the TBODY

> get the TD which has the (default) SP Title

> get the DIV

 

> Apply CSS

 

Same concept but totally different CSS Selector can be applied to a Modern Page (I don't have one at hand; learn CSS)

We are working on better functionality for resizing columns.  You won't need the column formatter for this.  We'll let you click and drag to resize, and then you can save that width in your current view.

Thank you. Do you know when this will be available?

Sounds like a great solution. Intuitive and user friendly.

Looks like the "calculated field trick" to format a field is long gone:

https://support.microsoft.com/en-us/help/4032106/handling-html-markup-in-sharepoint-calculated-field...

 

a) Why does SharePoint show the JSON box when it doesn't even work for "classic experience". Microsoft should at least display an informational message or warning.

 

b) Please suggest, is there a way to format the background color of column in classic experience?

 

Appreciate any help.

 

 

Thank you for the suggestion.  We should set expectations properly in the settings page that the JSON formatting only works in modern mode.  I will file a bug and get this taken care of.

 

The best way to apply conditional formatting in list views in classic is to use JSLink.

Yes, after 8 years (since SP2010) Microsoft blocked the use of HTML in Calculated Columns

 

Only workaround now is to convert the bare HTML back to HTML **after** the page is displayed;

 

Just like we did in SP2007

 

JavaScript code is at: 

https://sharepoint.stackexchange.com/questions/218102/june-13th-2017-microsoft-blocked-handling-html...

The most often use of CSR in my solutions was to customize field rendering in list forms to:

  • Make fields read only
  • Hide fields
  • Pre-fill field values (e. g. from URL parameters)
  • Implement field conditions (hide/show fields based on other field values, URL parameters etc)

Additionally I used CSR to:

  • Develop custom field type
  • Implement conditional formatting
  • Hide a part of long strings in list view
  • Render field content as hyperlink
  • Replace field content or hide field content in list view