Jan 12 2017 05:10 PM
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.
Jul 13 2017 02:12 AM
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
Jul 13 2017 09:42 AM
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.
Jul 13 2017 09:58 AM
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.
Jul 18 2017 11:10 AM
Please allow the calendars to display tasks with conditional formatting.
Thank you very much
Jul 31 2017 09:22 AM - edited Jul 31 2017 09:24 AM
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.
Jul 31 2017 09:43 AM
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....
Aug 11 2017 04:46 AM
Sep 11 2017 02:52 AM - edited Sep 18 2017 02:07 AM
A solution for conditional formatting of modern ui lists provided by Waldek Mastykarz
This feature is only available in the Dev-Version or in First Release mode (Setting in the Admin Center)
Sep 11 2017 08:31 AM
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 ?
Sep 12 2017 02:45 PM
Oct 31 2017 06:34 AM
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
Mar 08 2018 11:42 AM
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.
Mar 12 2018 08:25 AM - edited Mar 12 2018 08:27 AM
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)
Mar 12 2018 10:16 AM
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.
Mar 12 2018 10:18 AM
Thank you. Do you know when this will be available?
Mar 12 2018 01:21 PM
Sounds like a great solution. Intuitive and user friendly.
Mar 20 2018 06:40 PM - edited Mar 20 2018 06:44 PM
Looks like the "calculated field trick" to format a field is long gone:
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.
Mar 21 2018 10:59 AM
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.
Mar 22 2018 01:30 AM
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:
Jul 23 2018 06:16 AM
The most often use of CSR in my solutions was to customize field rendering in list forms to:
Additionally I used CSR to: