Home
Microsoft

New SharePoint view formatting samples now available

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.

 

 CatalogDesk.pngDesktop view

CatalogTab.pngTablet view 

CatalogMobile.pngMobile 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.

 

DoclibDesktop.pngDesktop view 

 DocLibTablet.pngTablet view

DoclibMobile.pngMobile 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.

ListsDesktop.pngDesktop view

ListsTablet.pngTablet view 

ListsMobile.pngMobile view 

4 Comments
Senior Member

Formatting for group headings would complete the package!

Regular Visitor

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.

New Contributor

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

Regular Visitor
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.