This is a summary of the GitHub repository to format SharePoint Online View as of 13/10/2020. It might get outdated as developers update GitHub.
It turns lists view into more visual list of items, articles, anything you’d like.
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.
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 ?