New SharePoint view formatting samples now available
Published Oct 25 2018 02:59 PM 63K Views
Microsoft

Last May, at SharePoint Conference 2018, we previewed new user experiences built with view formatting  (previously called “row formatting”).  It’s based on the column formatting feature introduced last year, which allows you to format the appearance of individual columns using JSON.   You can learn more about view formatting and see more examples in this blog post.

 

As we revealed at Ignite 2018, we are publishing three new view formatting samples that you can use to jump start your own projects.  The new samples demonstrate view formatting in document libraries and lists.  They also demonstrate how to apply responsive designs to ensure the display looks great in desktop, tablet, and mobile devices as well as adjusting the layout appropriately when placed inside a web part on a page.

 

Each sample includes SharePoint site scripts, so you can quickly create the SharePoint lists and views that support the samples and try them out.   And formatted views also work great inside SharePoint web parts or tabs on Microsoft Teams.

 

You can browse and download all these and more on the Microsoft 365 Resource Center.

 

Resource Catalog

 

SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to implement a marketing resources catalog. This sample defines a custom view to bring focus to the status of items in the resource catalog. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and profile pictures.

 

 Desktop viewDesktop view

Tablet viewTablet view 

Mobile viewMobile view 

 

Document Library

 

SharePoint is at its best when using lightweight structure and process to organize content and keep things moving forward. New to Document Libraries is an out of the box Flow that allows you to quickly request a member of your team to sign off on a document in a Document Library. This sample defines a custom view to bring focus to the files that need to be approved. It also provides a better visual indication of where documents are in the process and which ones require action.

 

Desktop viewDesktop view 

 Tablet viewTablet view

Mobile viewMobile view 

Retail Accounts List

 

SharePoint lists are excellent places to store information. This example demonstrates how to use a custom SharePoint list to manage retail stores. This sample defines a custom view to bring focus to the status of store locations. It also provides a better visual experience by displaying all the data in an easy to read format by using icons, colors, and Bing maps.

Desktop viewDesktop view

Tablet viewTablet view 

Mobile viewMobile view 

12 Comments
Copper Contributor

Formatting for group headings would complete the package!

Copper Contributor

Agree with Eric. I have a number of requests from clients to improve the presentation of grouped items in document libraries. Having the ability to change the color of the group row would be really great.

Copper Contributor

Agree formatting for group headings and "Requires Attention" for group headings also.

1) Awesome. 2) Will view formatting eventually work when the list/library is added to a modern page? Would like to use this one for example: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/generic-tile-format Thanks.
Brass Contributor

Seconding  @Joe Gasper comment. I've applied some view formatting with the generic sample tiles code to a list and added that as a webpart, but it's broken in appearance on the page I created, works fine in the list view. I've a lot of classic sites that use a bit of scripting to pull a list through and format it and would like a more direct and easier solution that this would solve.

 

List View:

icons-test-list.PNG


Page View:

icons-test-list-page.PNG

 

Brass Contributor

These are very cool templates. Thank you very much!
In my case I want to set the "hideSelection" to false, because I need the context menu by right-clicking on an item. But when I do so, the Items are not flexed to the whole screen anymore. Like here:width calculation.png

Do you maybe have a solution for that?

 

And also I agree with Eric to have options for formatting group headings :)
Thanks a lot!
Micha

Copper Contributor

@Mark Owen  & @Joe Gasper Looks like the generic sample tiles code for a JSON formatted view of SP list includes class that pushes down tiles in first row.  Is there any way to delete or hide a class in JSON?  Looks like class is called ms-List-cell.

 

 

CascadeTiles.png

 

Any new infos here? I have the same problem mit ths css class ms-List-cell. My view formatting works when I change the view at the list, but not inside a modern page.

Copper Contributor

Issue seems to have resolved itself.  I do know that SharePoint performance for us was very slow last week.  This may have had an impact.  All good today - June 3, 2019.

 

QL5.jpg

Copper Contributor

@Chris McNulty Hey! I'm very interested in applying this to my site. I've tested the resource catalog template to see how it works and found that the list's views are not responsive. Whenever I visualize them from a tablet or phone, it just doesn't behave like in your pictures. Do I have to implement media queries into the CSS to achieve this? Would you happen to know where to read more about this specific problem? (How to implement the media queries). Thanks!

Copper Contributor

The link to the templates in Microsoft 365 resource center does not work.

Copper Contributor

I bet 5 years ago, when this post was made, it was available.

Version history
Last update:
‎Oct 25 2018 03:00 PM
Updated by: