Following the article – Column Formatting options let’s have the same exercise for this feature View Formatting announced during SharePoint Conference 2018.
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)
From
To (for example using bulletin board)
Below the list, click the title to see how to implement it.
London Underground Line Status
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.
Timeline Format
Summary
This sample formats your SharePoint list view to look like a timeline.
Bulletin Board
contact-card-format
date-conditional-format
Multi-line view rendering
person-currentuser-rowclass
text-conditional-format
Allow to specify a class with a more simple syntax of json
“schema”: “https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.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’, ”))”
Document Library Sample
Project Indicator – Risk Score Indicator
Project Indicator – RYG Status Format
Items in Tile Format
This sample uses tileProps element to format the tile layout of the view.
Resource Catalog Sample
Retail Account Sample
Conditional formatting based on choice field
ContentType Format
Conditional formatting based on a Choice field
Alternating Rows
Birthday Row Format
Contact Card Row Format
Document Library Items in Tiles Format
Current User’s Rows (link 1)
Current User’s Rows (Using a Multi-Person Column) (link 2)
User Profile Card
Staff Rota Shifts View Format
Twitter Format
Screen Capture of working Links
Planner Inspired Task Cards
Formats Task List Items in a Planner Inspired Card View.
Bar Graph format
Column Graph format
Item Hover view
Conditional formatting based on date
Items in Tile Layout
Budget Tracker Sample
Summary
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
Product Catalog Sample
Summary
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
Current Year Row Class
Summary
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.
Custom Header
Summary
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.
Custom hover card on List view
Summary
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
generic-video-button
Faq-Format
Summary
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.
Default hover card on doclib
Summary
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)
Wrap up
The official source is github.
What have you used for so far ?
Jeff, Jeff, Jeff,Jeff, Jeff – oh my goodness! What fabulous information and I’ve already used some of these codes. But — all I want to do is be able to have alternate rows shaded with colors of my choosing — only one color per list but I can’t seem to find something so simple anywhere!!! Are you able to help? Thanks so much! I’ve already placed this article where I can read it since it has some great info!
Hi, sorry for the unacceptable delay, i missed this one !
Unfortunately I havent played a lot with this feature ! Do let me know if you figured out something.
I suggest you post on the associated github https://github.com/SharePoint/sp-dev-list-formatting/issues 🙂
Have fun !
Hello Jeff, Great article and thanks for posting. I am a JSON newbie and currently teaching myself. Do you have any examples like this….. I am trying to output a product catalog list into two column output. In each column, simply include a title, description, and “more” button. Thanks in advance! Rod
Thanks for this great collection!
You’re welcome !
Does View Formatting works in SharePoint 2019 on-premises? I don’t see option for that in the list.
hi, no it is only for SharePoint Online in Office 365, at the moment. Maybe in a future feature pack for SharePoint 2019.
I don’t see this option on my On-Premises SharePoint 2019 site. Looks like this is misleading.
Yeah looks like it. Some mvp confirmed my thought it’s not existing. Only column formatting. But not every formatting are supported
Even Column formatting is limited. It does not support Excel like formulas. 🙁
Looks like the article is updated and SharePoint Server 2019 is removed from it. 🙂 Thanks for your help.
Hi sorry for the late reply, have you found what you were looking for ? Otherwise i suggest to create an issue in github
My question was whether SharePoint 2019 supports view formatting, but seems it does not.
Is it possible to access the items from another lists ? To build Parent Child relation in the view.
Hi, as i am aware no. You may use PowerApps or SPFX to achieve your requirement
Thanks, how to use the ‘Location’ Column in JSON, for example I have column “Event Location” with “Location” Data Type. I wants to use the City “Event Location: City” in the view.
It didn’t work when used “txtContent”: “[$EventLocation:City]”.
Hi Jeff. Thanks a lot for the info. Wanted to ask if we can covert one of the column to hyperlink to display all the items in the row (url as ……DispForm.aspx?ID=….). Something of the sort of (linked to item) in sharepoint on premise
Hi! Where can I find information on the view formatting that is displayed in your Article Image (selling items with an image of the item, button for Contact Seller, etc.)? I cannot seem to guess the correct name of the Format, nor find any info on that look online, so any help would be greatly appreciated! Thank you so much!
Hi, i think it was just a sample … no code available sorry, but you can start from an existing one and customize from that if you have some development skill
Hi there. I’m using sharepoint online with moder page.
I’m trying to apply rows conditional formatting based on a Status column value. However, in the rules this column do not appear, i think it’s because a lookup value. I tryed advanced mode and write my own json code but i can’t make it display anything… it seems it’s invalid. A litle example:
{
“additionalRowClass”: {
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
{
“operator”: “toLowerCase”,
“operands”: [
“[$Status]”
]
},
{
“operator”: “toLowerCase”,
“operands”: [
“Closed”
]
}
]
},
“sp-css-backgroundColor-successBackground50”,
“sp-css-backgroundColor-neutralBackground”
]
}
}
It’s not possible to do formatting based on lookup values?