It's like I have to choose between a "regular list" or a task list with the added visual timeline functionality (which people tend to like). 
@SVaibhav @Lincoln DeMaris Custom Row Actions not working on SP Page:
Hi! This is my first time coding or doing View Formatting, so any help would be much appreciated:
I am using both the Custom Row Actions editProps (edit button) and defaultClick (info button) in my formatting. On the list, they both work perfectly. On the SP Page where I am displaying this list view, however, neither button works as it did on the list itself. The editProps does not do anything at all when clicked, and the defaultClick causes a new tab to open up with the item details, as opposed to the right-hand details pane sliding out. Can you please help me with these issues?
Thanks so much!
Marissa
{
"schema": "<a href="<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>" target="_blank"><a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a</a>>",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"attributes": {
"class": "sp-row-card"
},
"style": {
"flex-direction": "column",
"display": "flex",
"align-items": "flex-start",
"margin-left": "40px"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "left",
"display": "flex",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {},
"children": [
{
"elmType": "a",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"href": "[$shopImage1]",
"target": "_blank"
},
"children": [
{
"elmType": "img",
"style": {
"width": "250px",
"height": "auto",
"align": "top",
"display": "block"
},
"attributes": {
"src": "=if([$shopImage1], [$shopImage1], @currentWeb + '/Shared Documents/swap_shop_default.jpg')",
"class": "ms-fontSize-su"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"width": "250px"
},
"children": [
{
"elmType": "a",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"href": "[$shopImage2]",
"target": "_blank"
},
"style": {
"display": "=if([$shopImage2], 'inline', 'none')",
"width": "25%"
},
"children": [
{
"elmType": "img",
"style": {
"width": "100%",
"height": "auto",
"border": "1px solid white",
"box-sizing": "border-box"
},
"attributes": {
"src": "[$shopImage2]",
"class": "ms-fontSize-su"
}
}
]
},
{
"elmType": "a",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"href": "[$shopImage3]",
"target": "_blank"
},
"style": {
"display": "=if([$shopImage3], 'inline', 'none')",
"width": "25%"
},
"children": [
{
"elmType": "img",
"style": {
"width": "100%",
"height": "auto",
"border": "1px solid white",
"box-sizing": "border-box"
},
"attributes": {
"src": "[$shopImage3]",
"class": "ms-fontSize-su"
}
}
]
},
{
"elmType": "a",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"href": "[$shopImage4]",
"target": "_blank"
},
"style": {
"display": "=if([$shopImage4], 'inline', 'none')",
"width": "25%"
},
"children": [
{
"elmType": "img",
"style": {
"width": "100%",
"height": "auto",
"border": "1px solid white",
"box-sizing": "border-box"
},
"attributes": {
"src": "[$shopImage4]",
"class": "ms-fontSize-su"
}
}
]
},
{
"elmType": "a",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"href": "[$shopImage5]",
"target": "_blank"
},
"style": {
"display": "=if([$shopImage5], 'inline', 'none')",
"width": "25%"
},
"children": [
{
"elmType": "img",
"style": {
"width": "100%",
"height": "auto",
"border": "1px solid white",
"box-sizing": "border-box"
},
"attributes": {
"src": "[$shopImage5]",
"class": "ms-fontSize-su"
}
}
]
}
]
}
]
},
{
"elmType": "div",
"style": {
"text-align": "left",
"display": "flex",
"align-items": "flex-start",
"flex-direction": "column",
"flex": "1"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title"
},
"txtContent": "[$Title]",
"style": {
"margin-left": "15px"
}
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding",
"display": "=if([$Description], 'block', 'none')"
},
"txtContent": "[$Description]",
"style": {
"margin-left": "15px"
}
},
{
"elmType": "a",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"href": "[$URL]",
"target": "_blank"
},
"style": {
"border": "none",
"text-decoration": "none",
"background-color": "transparent",
"align-items": "center",
"flex-direction": "row",
"display": "=if([$URL], 'flex', 'none')",
"cursor": "pointer",
"border-radius": "5px",
"text-align": "center",
"vertical-align": "middle",
"margin": "0px 10px 0px 15px",
"padding": "0 13 0 13px"
},
"children": [
{
"elmType": "span",
"style": {
"padding-right": "4px"
},
"attributes": {
"iconName": "link"
}
},
{
"elmType": "span",
"style": {
"padding-right": "2px",
"font-size": "12px"
},
"txtContent": "[$URL.desc]"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"padding-left": "15px",
"margin-top": "auto",
"box-sizing": "border-box",
"width": "100%",
"white-space": "nowrap"
},
"children": [
{
"elmType": "div",
"txtContent": "='$' + [$Price]",
"style": {
"padding-right": "5px",
"margin": "8px 10px 0px 0px",
"font-size": "16px",
"color": "green",
"font-weight": "700"
}
},
{
"elmType": "a",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
"href": {
"operator": "+",
"operands": [
"mailto:",
"[$Author.email]",
"?subject=Swap Shop Inquiry&body=\r\n---\r\n",
"@me",
"\r\nSwap Shop link: <a href="<a href="https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=" target="_blank">https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a>" target="_blank"><a href="https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a" target="_blank">https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a</a>>",
"[$ID]"
]
}
},
"style": {
"border": "none",
"text-decoration": "none",
"background-color": "transparent",
"align-items": "center",
"flex-direction": "row",
"display": "flex",
"cursor": "pointer",
"border-radius": "5px",
"text-align": "center",
"vertical-align": "middle",
"margin": "8px 10px 0px 15px",
"padding": "0 13 0 13px"
},
"children": [
{
"elmType": "span",
"style": {
"padding-right": "8px",
"font-size": "16px"
},
"attributes": {
"iconName": "Mail"
}
},
{
"elmType": "span",
"txtContent": "[$Author.title]",
"style": {
"font-size": "12px",
"padding-right": "2px"
}
}
]
},
{
"elmType": "div",
"style": {
"border": "none",
"background-color": "transparent",
"align-items": "center",
"flex-direction": "row",
"display": "=if([$Phone], 'flex', 'none')",
"border-radius": "5px",
"text-align": "center",
"vertical-align": "middle",
"margin": "8px 10px 0px 15px",
"padding": "0 13 0 13px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "phone"
},
"style": {
"padding-right": "6px",
"font-size": "14px"
}
},
{
"elmType": "span",
"txtContent": "='(' + substring([$Phone], 0, 3) + ') ' + substring([$Phone], 3, 6) + '-' + substring([$Phone], 6, 10)",
"style": {
"font-size": "12px"
}
}
]
},
{
"elmType": "div",
"style": {
"margin-left": "auto",
"display": "flex"
},
"children": [
{
"elmType": "button",
"customRowAction": {
"action": "share"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"align-items": "center",
"flex-direction": "row",
"display": "flex",
"cursor": "pointer",
"border-radius": "5px",
"text-align": "center",
"vertical-align": "middle",
"margin": "8px 10px 0px 15px",
"padding": "0 13 0 13px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "share"
},
"style": {
"padding-right": "6px",
"font-size": "16px"
}
},
{
"elmType": "span",
"txtContent": "Share",
"style": {
"font-size": "12px"
}
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"align-items": "center",
"flex-direction": "row",
"display": "flex",
"cursor": "pointer",
"border-radius": "5px",
"text-align": "center",
"vertical-align": "middle",
"margin": "8px 10px 0px 15px",
"padding": "0 13 0 13px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "info"
},
"style": {
"padding-right": "6px",
"font-size": "16px"
}
},
{
"elmType": "span",
"txtContent": "Info",
"style": {
"font-size": "12px"
}
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "editProps"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"align-items": "center",
"flex-direction": "row",
"display": "=if(@me != [$Author.email], 'none', 'flex')",
"cursor": "pointer",
"border-radius": "5px",
"text-align": "center",
"vertical-align": "middle",
"margin": "8px 10px 0px 15px",
"padding": "0 13 0 13px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "edit"
},
"style": {
"padding-right": "6px",
"font-size": "16px"
}
},
{
"elmType": "span",
"txtContent": "Edit",
"style": {
"font-size": "12px"
}
}
]
},
{
"elmType": "button",
"customRowAction": {
"action": "delete"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"align-items": "center",
"flex-direction": "row",
"display": "=if(@me != [$Author.email], 'none', 'flex')",
"cursor": "pointer",
"border-radius": "5px",
"text-align": "center",
"vertical-align": "middle",
"margin": "8px 10px 0px 15px",
"padding": "0 13 0 13px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "delete"
},
"style": {
"padding-right": "6px",
"font-size": "16px"
}
},
{
"elmType": "span",
"txtContent": "Delete",
"style": {
"font-size": "12px"
}
}
]
}
]
}
]
}
]
}
]
}
]
}
}
Hello,
I am also new to SP/CSS/JSON formatting. A couple of months ago I made a SP list populated by several flows and formatted with JSON. The list is a table of contents for multiple SP sites.
I formatted the list view using the following code:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "a",
"txtContent": "@currentField",
"attributes": {
"class": "sp-field-fontSize14 ms-fontColor-neutralPrimary ms-fontColor-red--hover",
"href": "[$Link]"
},
"style": {
"text-decoration": "none",
"width": "300px",
"min-width": "200px",
"min-height": "1em",
"height": "1em",
"white-space": "nowrap",
"padding-left": "=if(indexOf(@currentField, ' ') == 1, '', if(indexOf(@currentField, ' ') == 3, '20px', '40px'))"
}
}
}
It looks good in SP list, but not in web-part. In web-part the distance between rows is high and it shows column headers.
The thing is until 3-4 weeks ago it was ok in web-part also, but something changed, maybe a SP update?
This is how it looks in SP list - this is ok, compact and without column headers
And this is how it looks in web-part - with high space between rows and with column headers
Please help me fix this! Thank you!
@SVaibhav @LincolnDeMaris I've got some very simple JSON formatting one column to have a clickable link to a URL in another column. It works great in the list, and when you first add it to a modern page, it looks fine too, but if I go to edit and then select a specific view, and then hit publish, the formatting is gone. JSON still works if you don't edit the list before publishing. More unusual is that if you click See All on the Modern Page, when the list comes up, the formatting is also not visible there anymore, even though the JSON is still there. Any help would be wildly appreciated.
UPDATE: I just realized that the Link field must be visible in the View for the JSON to work in a Modern Page. Works just fine with the List itself, but not when added to a Modern Page. Hope this helps someone!
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "@currentField",
"style": {
"display": "=if([$Link] != '', 'none', 'block')"
}
},
{
"elmType": "a",
"txtContent": "@currentField",
"attributes": {
"target": "_blank",
"href": "[$Link]"
},
"style": {
"display": "=if([$Link] != '', 'block', 'none')"
}
}
]
}
when adding to modern page, if i don't change the lists settings, it does show JSON, but if I try and specify a view or anything else, it kills it:
what it's supposed to do:
what it actually does after clicking See All:
