Forum Discussion
Column formatting not showing when view shown in a List Web Part (Modern Page and List)
I have a list with a JSON Column Formatter applied, the column format works fine when viewing the list directly, however when I'm using the List Web Part (still appears to be a preview part), the col...
SVaibhav
Microsoft
Microsoft
It'd be great if you can share the JSON you are using. That'll help us in pinpointing the issue you are facing.
Thanks
{
"schema": "<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>",
"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="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>",
"[$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"
}
}
]
}
]
}
]
}
]
}
]
}
]
}
}- SVaibhav
Thank you for sharing the JSON.
The info button, when clicked on the homepage (as a part of webpart) will open a new tab. This is the expected behavior in the current scenario.
And we acknowledge that the edit action is not working when used as a part of webpart, we'll be adding this as a part of our backlog and will soon work upon the same.
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
Hi Cris20,
There was a bug last week because of which the list header was visible on the webparts. It has been fixed now, and you should see the fix in production by next week (if not already). The other spacing related CSS issue also looks like another side effect of the bug.
I just tried the same on my test site and it worked as expected. Kindly re-check or wait for a week for it to get resolved, else let me know if the issue still exists.
SVaibhav thanks so much. How can I ensure that I am aware of when this backlog item is addressed and I can begin to utilize this functionality? Is there a board of some sort I should be checking, or notifications I can set up, etc.?
Thanks for your help!
Marissa
