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
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 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:
Hello,
I have added the basic button from the Microsoft Documentation for editProps and it works fine in the library view, but when added to a modern page the button either does nothing or tries to open the document rather than the properties. Reading through this thread I cannot tell if that is still to be expected or not?
Thanks.
Code for reference:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "button", "txtContent": "Open this item", "customRowAction": { "action": "editProps" } }- SVaibhav
Hi Hjalmar Otto Fjøsne ,
Sorry to hear that, but can you please share more details around the issue.
Do you have the JSON which was applied to the column? And what do you mean that the JSON do not show in "Format this column" option? Are you saying that you are able to see the formatted column but there isn't any JSON when you open the formatting pane?
If you are also not able to see that formatting being applied, can it be possible that some other user, who has the edit access on the list, must have removed the formatting?It would really help in debugging if you can share the JSON you are using which isn't showing on the webpart but is working fine when you navigate to the list.
- This seems to have returned for me, are devs applying changes in production without proper testing? The JSON does no longer show in the format this column options. This is not only for the web-parts in my case. The strange thing is that its inconsistent, viewing the list in a web-part and navigating to the list-view seems to sometimes show the correct formatting and sometimes not. Regardless, it seems I am unable to recover the JSON-formatting I created a while back, I did not expect to have to keep backups to account for breaking changes. Should I consider the formatting to be lost and start over and wait until this happens again, or could it return once they repair what they broke?
It looks good today, so it seems the issue was solved.
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.
