Forum Discussion
LincolnDeMaris
Microsoft
Jan 13, 2017Custom field rendering in modern list views
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.
- Ivan BilokonCopper Contributor
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
- Amy Felton-TothCopper Contributor
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.
- LincolnDeMaris
Microsoft
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.
- Jos SpeelmansCopper Contributor
Sounds like a great solution. Intuitive and user friendly.
- Danny EngelmanIron Contributor
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)
- Deleted
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
- Alexander SchulzCopper Contributor
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)
- Danny EngelmanIron Contributor
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 ?
- Alexander SchulzCopper ContributorSeems to be the course of things. For me it's also much new stuff
- Jorge SilvaCopper Contributor
Please allow the calendars to display tasks with conditional formatting.
Thank you very much- Vivek JainBrass Contributor
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.
- Dean_GrossSilver Contributor
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-and-onedrive.
- Deleted
Is this the right room for the old Calculated column HTML render trick?
It was lovely being able to dynamically render a JS button or an HTML link in a SharePoint column and would dearly love this to be made available again please? It was so easy and provided many solutions.
- LincolnDeMaris
Microsoft
Yes - we're working on a new, improved way to accomplish those same tricks that isn't, at the same time, a way for site contributors to put arbitrary script on list view pages. We will announce more in the next month or two.
- Deleted
So, I'm sure someone else has already spotted this, but if I create a new page with the modern UI and add the Lists (preview) webpart and select my list with the calculated column in it, my button renders!!! If inspect the element the URL is correct, however if I click the button itself it takes me to the item form rather than the URL defined in the HTML. Bizarre and inconsistent behaviour.
Anyone else seeing this and even better, explain this???
- Vivek JainIron Contributor
Hello Lincoln,
Thanks for the great efforts of checking the community for the featuresand ensuring supporting the most prevalent scanarios in the modern UIs.
In my shop we are on Office-365 and Sharepoint Online. I had couple of naive queries.
a) We migrated from on-premise SharePoint 2010 into the Office-365. I see some of the lists has conditional formatting and the conditional formatting reflect fine in Office-365 as well. I am not sure if the vendor who helped migrate to Office-365 did any manual tweaks in the code to have the conditional formatting remain as is. I was trying to find out if there is a way in office-365 and SahrePoint Designer 2013 to conditional format the columns. Although I see the conditional formatting working in lists, but I am not able to figure out how the conditional formatting was put in place for this list. The SharePoint Designer 2013 doesn't have any conditional formatting options (although SharePoint Design 2010 had those option I assume). Please correct me, does SharePoint Designer 2013 not have the conditional formatting options? I must be wrong, please guide.
b) To achieve the conditional formatting in Office-365 I was contemplating the option of putting HTML code in the 'formula' of the field (instead of modifying the out of the box HTML code using SharePoint Designer 2013). e.g. to color a field 'A' based on the values from field B, put an HTML in the 'formula' of field 'A' as below:
="<DIV style='background:"&IF([B]<15,"lightcoral",IF([B]<30,"yellow","white"))&";color:black;font-weight:bold;text-align:center'>"&[B]&"</DIV>"
Is this option safe and advisable to use if the point (a) above is true and we don't have yet the other "out-of-box" means to do conditional formatting in Office-365.
c) With the recent Office-365 release in April, 2017, one of the user expereienced an 'unwanted' UI change and I was not 100% certain if this is release related. Please see here.
Many thanks.
Vivek
- Alexandru MolodoiCopper Contributor
Hi there,
Ability to trigger async refresh of a view would be much needed. For example clicking an action on a list item opens a dialog and on dialog close you need to load the new values in the view without reloading the page.
Alex M.
- Saulius LaurinaitisCopper Contributor
Dont't forget to include promises for getting field value when saving, e.g. on saving I need to get other field value and then recalculate using values from other list.
Thanks
- Oliver ZeiserBrass Contributor
I have no idea how you want to support certain scenarios only without customers beeing upset again. I am pretty sure you still remember very well what happend when you released the modern document library.
But I think it is a very good idea to ask the community before the rollout this time. So thank you for that! Now I only hope that you will think again about the idea to support certain scenarios only. A generic solution will be much better....
Here is a very good list of what people have been doing and what was possible with jslink in the past:
https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
If you can support all those scenarios, I think you are on the right track!
- Danny EngelmanIron Contributor
But most of those MSDN Client Side Rendering examples are .... okay I'll be nice because you can't expect all "Programmers" to understand WebDesign.... not really smart
What a Fronteer wants is to be able to use the standard Browser technologies.
Why (For G. Sake!) create HTML and apply styling with code if the Browser can do it for you ???
That means we need to be able to set HTML5 Data-Attributes on DIVs that make up the rows/cells in the Modern Experience "Tables"
All we need then to color a whole row is a CSS selector like:
TR [data-priority*='High'] {
background-color:#F00;
}
Note: this idea/application is now (C) Danny Engelman
So NO Microsoft!
Do not built this as a "scenario", because I will sue you
We want 100% JavaScript access in the Modern Experiences- LincolnDeMaris
Microsoft
Danny, what you are proposing is what we are planning on building. Through a stable API, we plan on making available the DOM elements that contain list view fields, so you don’t have to search for specific elements via ID, attribute, etc. Once you have the DOM element, you should be able to do anything you want to it.
The reason we talk about this work in terms of “scenarios” is because we plan on being pretty selective about which DOM elements on modern pages that we support being accessed and manipulated in this manner. We will start with a small set and enable more and more as time goes on, based on feedback from the community about the customization scenarios that are necessary. The reason we’re doing it this way is because we want to guarantee these customizations will work going forward as we evolve our UX.
We are aware that once we give developers the ability to place custom code on pages in SharePoint, the developer has access to every DOM element on the page, not just elements that we provide through our stable API. However, we don’t guarantee good results if you take advantage of this; these customizations tend to break when the product team makes changes to the out of the box pages and controls. This is really nothing new – it has always been the plight of the SharePoint developer. The difference is that today, we’re trying to give developers better options in the form of scoped APIs that allow you to create customizations that are robust against future product changes. If the scoped APIs don’t do what you want right away, you can either give us feedback and we’ll try to build the right APIs in the right order to address most common needs, or you can try to do things the “old way” with all the known caveats.