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 column formats are not displayed.
Is this a known limitation? Are there any timescales for a fix, or any workarounds available to allow me to embed a list view into a page with multiple other web parts and retain the column formatting from the JSON Formatter?
I have an even more specific question: is support for this planned when you use a 'Project Tasks' list? None of the JSON I've added to columns will show...
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).
Mike Insch Hi!
I am currently working on a SharePoint Online (Modern Page and List), with Column Formatting and View Formatting in some customized lists.
I am embedding my lists through a WebPart for Viewing List in several Pages. I can see that Column Formatting is consistent between the List and the one displayed in the WebPart.
However, View Formatting is not consistent, and it depends on the Style and Class formatting implemented for my View.
@Lincoln DeMaris, sorry for calling out your name, but you seem to be our "go-to person" for getting some estimates. Are there any news for correcting the styling done through the View Formatting?
Thank you in advance!
SVaibhavMicrosoft
LHMinu Hi!
While we acknowledge that there is some mismatch between the formatting behavior of lists when used as web parts (and we are working on it), it'd be best if you can provide us with the JSON being used for view formatting. This will help us in pin pointing the problem specific to your use case and maybe we'll be able to provide you with a workaround till the time the issue is completely resolved.
Regards
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" } } ] } ] } ] } ] } ] } ] } }
Hi Mike,
We are running into the same issue as well when adding a list using JSON green-yellow-red status column directly as a web part.
Don't if this will meet your requirements but the workaround I've implemented is utilizing Page Viewer (see below for the procedure I went thru), which seems to work fine for now. Hopefully Microsoft will support JSON formatter in web parts in the future.
Procedure
- Make note of the URL for your SharePoint list.
- Go to your SharePoint page you want to add the web part and select Edit page.
- Click on the Insert tab > Web Part > Media and Content > Page Viewer.
- In the Page Viewer web part, select Edit Web Part.
- In the Page Viewer dialog, make sure Web Page is selected, than enter the URL noted from Step 1 into the field provided.
- Click Apply.
NOTE: You may need place a fixed height or width (in Appearances section) accordingly on the web part as well.
- Paul,
He is talking about the modern list WebPart....I simply think this WebPart just not take into account any customization you have in your modern listThe format is applied directly to the column. Juan Carlos is right that it's in the Modern List Web Part that the format doesn't show.
We're effectively trying to build a dashboard across several lists / libraries and need to be able to show the formats to clearly highlight certain status items. It's a shame that the Web Part ignores the formats, as this would save us writing custom code or going with other more complex options like PowerBI.
Any ideas when (or even if) the Modern List Web Part will support column formats?
- Well, IMHO it's not a well known limitation, it's just that the modern List and Document Library WebParts does not support column formatting....column formatting is just something specific (at the moment) of the modern lists and document libraries
