Following the article – Column Formatting options let’s have the same exercise for this feature View Formatting announced during SharePoint Conference 2018. I wanted an exhaustive list of formatting options for Views, in order to answer employees needs.
This is a summary of the GitHub repository to format Microsoft List Views in SharePoint or to format Microsoft List in Microsoft Teams.
Last article update 02/02/2021 according to the GitHub Repository.
It turns lists view into a more visual list of items, articles, anything you’d like.
How it works ? How to set it up ? Click the link on each title to access the detailed page.
First example (done by myself)
Below the list, click the title to see how to implement it.
This sample is intended to be used in combination with the Employee Onboarding list template. The format restores the intended alternating rows but also adds a Tiles view that provides a more step based approach.
This sample is intended to be used in combination with the Issue Tracker list template. The format keeps the row highlighting for blocked issues but also adds a Tiles view that provides a Microsoft Planner look and feel.
This sample formats your SharePoint list view to look like a message chat. If
@me, the message will be displayed on the right.
This project Gantt Chart sample demonstrates how to show a list of high level tasks in a Gantt chart. It is mainly useful for top-level views.
Turns into this
Display on the homepage of your SharePoint intranet a continually updated feed of London Underground line statuses using the publicly available Transport for London (TFL) API. The results are retrieved using Power Automate, then written to a SharePoint list, and the list view is styled (using view formatting) so it looks like the familiar TFL tube status board with correct line colours. Any line not currently in Good service can be clicked and a hovercard will show with further information i.e. delays/suspension/closure etc.
This sample formats your SharePoint list view to look like a timeline.
Allow to specify a class with a more simple syntax of json
“additionalRowClass”: “=if([$Status] == ‘Done’, ‘sp-field-severity–good’, if([$Status] == ‘In progress’, ‘sp-field-severity–low’ ,if([$Status] == ‘In review’,’sp-field-severity–warning’, if([$Status] == ‘Blocked’,’sp-field-severity–blocked’, ”))”
This sample uses tileProps element to format the tile layout of the view.
Current User’s Rows (link 1)
Screen Capture of working Links
Formats Task List Items in a Planner Inspired Card View.
Item Hover view
The budget tracker sample demonstrates how to use view formatting to format lists and display views of the lists inside connected web parts. This provides the ability to view the budget items associated with individual projects on a single page.
Desktop and tablet view
The product catalog sample demonstrates how to use view formatting to format lists and display views of the lists inside web parts. It also demonstrates how to create links to download documents from the SharePoint Document libraries.
Desktop and tablet view
Demonstrates applying a class to rows where a value equals the current year. Can easily be updated to compare other portions of the date such as the month, hour, minute etc. by using the other date-part operators.
Sometimes it is necessary to remove the standard headers. In those cases, you may still want to show a custom header. This sample demonstrates creating a custom header and only showing it on the first row. The key to this technique is setting the
display style attribute to
none (hidden) whenever the
@rowIndex is not 0 (first row).
Creating a custom header removes the standard features such as menus, sorting, moving, resizing, etc. In addition, the sticky header feature is now gone. So an additional sample, custom-header-repeating-format.json is provided that demonstrates drawing the custom header every 30 rows.
The following image shows a list with a custom hover added to a List view:
On hover – Metadata on the column “Status” is made available via view formatting
This is sample creates an FAQ formatted list. Optionally, you can include the Keyword and KeywordLink columns for the faq-keyword-links-format.json sample.
The following image shows a list with a default hover added to a formatted view in a doclib
On hover in a formatted view on a person column a profile card is displayed
Others (no sample)
What have you used for so far ?