Column formatting not showing when view shown in a List Web Part (Modern Page and List)

[Mike Insch]

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?

[#2]

Hi! I read the issue was resolved but I do not manage to see the column formatting in the webpart that I inserted into the starpage. My JSON code in the formatting part of the column:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "img",
"attributes": {
"src": "='https://xxxxxxx.sharepoint.com/sites/intranet/Ledenfotos/'+ @currentField + '.jpg'"
},
"style": {
"width": "60px"
}
}

This works fine in the normal listview but when inserted as a webpart it just shows the content of the field instead of the picture.

[#3]

So, I have a page that has multiple lists that I'd like to customize.  The first two web parts that I added with the first two lists work great.  None of the rest are using the list styling.  How do I make that happen for more than just two lists?

[#4]

It doesn't work for me, too.

[#5]

Not working here either. Applied coloring with the standard "Fill background color" template for a choice field, and looks great in the modern list view. But have tested now in Web Part Page, Site Page, and Wiki Page and none of them is displaying the background color formatting.

It's been almost a year since original post, and several months since promised fix. Any update? Some people are reporting the behavior fixed, others not. Was it not fully deployed, or rolled back? 

Thanks.

---

[#6]

@Darin Hawley Web Part Page, Wiki Page are classic SharePoint pages. The column formatting only works on the modern web parts, which are available on the modern pages only.

[#7]

Thanks for the clarification, but as noted in my previous post it was also not working in modern Site Pages. I did manage to write some JSON code that works, but only by setting background color directly, not via predefined classes. I kept it simple here w/o conditional logic by just making the values of the list choice an HTML color name (I only needed Red/Yellow/Green for status).

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": { "background-color": "@currentField" }
}

[#8]

For the record, here is a test list with the first column rendered using my code and the second column rendered using the built-in color formatter. 

And here is the same list embedded in a modern site page...

[#9]

I've tried every suggestion in this thread and cannot get the List Web Part to display conditional formatting on a modern page.   Like others, it works beautifully in the list view, just not on a modern page (where it would be most useful).

It's unfortunate.  This is highly requested by our user base.  I was preparing to introduce this feature to the power-users in our company, but I don't feel comfortable showing them a feature that feels only half-finished.   

UPDATE:  Column formatting is now working in our tenant.   Thanks for fixing this!  

[#10]

@Matt Hobbs This is very confusing. I have two modern communication sites. They are very simple sites. I applied the same exact (copied and pasted) JSON formatting to a view. It looks great when looking at the library.

I display the library with a Document Library Web Part, usingthe formatted view. On one site it works perfectly. On the other site it refuses to render. Colors and hovering behavior are the most affected. I see a lot of gray. Depending on the browser, hover may or may not work.

But why is this inconsistent between my two sites?

I would appreciate any insight to this.

[#11]

@Lincoln DeMaris Please can you tell me the notice number (MCxxxxxxx) under which this was rolled out. It is still not working in our tenant and I want to check the notice has been applied to it.

[#12]

@Lincoln DeMaris One other question, does it matter whether you insert a list into a page using the App Part or the Web Part?

[#13]

Hi Lincoln,

Not sure if this has rolled out yet, but custom list views had been working OK in list web parts (except for classes - had to directly apply styles instead); however, today I noticed that column headings are now being shown in the web parts.  They weren't appearing yesterday, and I haven't changed anything on my end.  This is happening in multiple tenants.  Is this something that is going to be corrected (soon I hope)?

Thanks

@Lincoln DeMaris 

[#14]

@Lincoln DeMaris Do we know if Microsoft plans on setting up classes to be seen in the list web part as opposed to styles in modern sites anytime soon?

[#15]

@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!

[#16]

@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

[#17]

Hi @SVaibhav !

Thank you so much for the predisposition.

My JSON is based on the code displayed on the GitHub for Retail Detail View. However, I removed the reference to the .api for retrieving and displaying locations through a map.

I am using the same structure for displaying text, and the main goal of the view is displaying the Status for Projects. When embedding the list on a WebPart, it shows the same text and the same structured table; however, the formatting and spacing of the text is completely arbitrary (As if the specifications made on the Classes didn't exist).

{
  "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>",
  "debugMode": false,
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": " ms-borderColor-neutralLight"
    },
    "style": {
      "border-top-width": "1px",
      "border-top-style": "solid",
      "width": "100%",
      "padding": "0 0 0 20px",
      "flex-wrap": "wrap",
      "align-items": "flex-start",
      "justify-content": "space-between"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex": "1 0 300px",
          "margin": "10px"
        },
        "children": [
          {
            "elmType": "button",
            "attributes": {
              "class": "ms-fontSize-xl ms-fontColor-themePrimary"
            },
            "style": {
              "border": "0",
              "padding": "0",
              "margin-bottom": "0.5em",
              "background-color": "transparent",
              "cursor": "pointer",
              "line-height": "1.5em",
              "overflow": "hidden",
              "text-align": "left"
            },
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-fontSize-mPlus"
            },
            "style": {
              "line-height": "1.5em"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontWeight-bold"
                },
                "txtContent": "Goal: "
              },
              {
                "elmType": "span",
                "txtContent": "[$Goal]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-fontSize-mPlus"
            },
            "style": {
              "line-height": "1.5em"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontWeight-bold"
                },
                "txtContent": "Start Date: "
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString[$StartDate]"
              },
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontWeight-bold"
                },
                "txtContent": "  ||  "
              },
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontWeight-bold"
                },
                "txtContent": "Due Date: "
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString[$Due_x0020_Date]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex": "0 0 539px",
          "width": "504px",
          "margin": "10px",
          "display": "flex",
          "justify-content": "space-between"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-neutralLighter"
            },
            "style": {
              "flex": "0 0 180px",
              "height": "108px",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "class": " ms-fontSize-mPlus ms-fontWeight-bold"
                },
                "style": {
                  "line-height": "2em"
                },
                "txtContent": "Last Activities"
              },
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-light"
                },
                "style": {
                  "display": "inline-block",
                  "line-height": "1em",
                  "vertical-align": "top",
                  "text-align": "justify",
                  "margin": "5px"
                },
                "txtContent": "[$LastActivities]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-neutralLighter"
            },
            "style": {
              "flex": "0 0 173px",
              "height": "108px",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "class": " ms-fontSize-mPlus ms-fontWeight-bold"
                },
                "style": {
                  "line-height": "2em"
                },
                "txtContent": "Next Activities"
              },
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-light"
                },
                "style": {
                  "display": "inline-block",
                  "line-height": "1em",
                  "vertical-align": "top",
                  "text-align": "justify",
                  "margin": "5px"
                },
                "txtContent": "[$NextActivities]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "=if([$Status] == 'Red', 'ms-bgColor-red', if([$Status] == 'Green', 'ms-bgColor-green', if([$Status] == 'Amber', 'ms-bgColor-yellow', if([$Status] == 'On Hold', 'ms-bgColor-teal', ''))))"
            },
            "style": {
              "flex": "0 0 173px",
              "height": "108px",
              "box-sizing": "border-box",
              "padding": "12px 10px",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": " ms-fontSize-mPlus ms-fontWeight-bold"
                },
                "style": {
                  "line-height": "0.5em"
                },
                "txtContent": "Status"
              },
              {
                "elmType": "div",
                "style": {
                  "color": "#fff",
                  "font-size": "70px",
                  "line-height": "1em"
                },
                "attributes": {
                  "iconName": "=if([$Status] == 'Red', 'StatusCircleErrorX', if([$Status] == 'Green', 'CheckMark', if([$Status] == 'Amber', 'StatusCircleExclamation', if([$Status] == 'On Hold', 'Remove', ''))))"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

[#18]

@LHMinu Hi!

Thank you for sharing the JSON. As we expected, there are some classes related to font-size and font-color which are not working properly when used on web part. The same is the case here too. For now I have modified your JSON to use the actual CSS properties instead of classes which you can use for now (till we resolve this completely).

You can use the following JSON for now, and to see what changes I did to the original JSON you can see them here.

PS: There is still one class missing called "ms-fontColor-themePrimary", so that mismatch is still going to happen, or you can use a fixed color for that (for now). Let me know if you need help with that!

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "debugMode": false,
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": " ms-borderColor-neutralLight"
    },
    "style": {
      "border-top-width": "1px",
      "border-top-style": "solid",
      "width": "100%",
      "padding": "0 0 0 20px",
      "flex-wrap": "wrap",
      "align-items": "flex-start",
      "justify-content": "space-between"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex": "1 0 300px",
          "margin": "10px"
        },
        "children": [
          {
            "elmType": "button",
            "attributes": {
              "class": "ms-fontColor-themePrimary"
            },
            "style": {
              "border": "0",
              "padding": "0",
              "margin-bottom": "0.5em",
              "background-color": "transparent",
              "cursor": "pointer",
              "line-height": "1.5em",
              "overflow": "hidden",
              "font-size": "21px",
              "text-align": "left"
            },
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "15px",
              "line-height": "1.5em"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "700"
                },
                "txtContent": "Goal: "
              },
              {
                "elmType": "span",
                "txtContent": "[$Goal]"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "15px",
              "line-height": "1.5em"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "700"
                },
                "txtContent": "Start Date: "
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString[$StartDate]"
              },
              {
                "elmType": "span",
                "style": {
                  "font-weight": "700"
                },
                "txtContent": "  ||  "
              },
              {
                "elmType": "span",
                "style": {
                  "font-weight": "700"
                },
                "txtContent": "Due Date: "
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString[$Due_x0020_Date]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex": "0 0 539px",
          "width": "504px",
          "margin": "10px",
          "display": "flex",
          "justify-content": "space-between"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-neutralLighter"
            },
            "style": {
              "flex": "0 0 180px",
              "height": "108px",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-size":"15px",
                  "font-weight": "700",
                  "line-height": "2em"
                },
                "txtContent": "Last Activities"
              },
              {
                "elmType": "span",
                "style": {
                  "font-size": "12px",
                  "font-weight": "100",
                  "display": "inline-block",
                  "line-height": "1em",
                  "vertical-align": "top",
                  "text-align": "justify",
                  "margin": "5px"
                },
                "txtContent": "[$LastActivities]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-neutralLighter"
            },
            "style": {
              "flex": "0 0 173px",
              "height": "108px",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-size":"15px",
                  "font-weight":"700",
                  "line-height": "2em"
                },
                "txtContent": "Next Activities"
              },
              {
                "elmType": "span",
                "style": {
                  "font-size":"12px",
                  "font-weight":"100",
                  "display": "inline-block",
                  "line-height": "1em",
                  "vertical-align": "top",
                  "text-align": "justify",
                  "margin": "5px"
                },
                "txtContent": "[$NextActivities]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "=if([$Status] == 'Red', 'ms-bgColor-red', if([$Status] == 'Green', 'ms-bgColor-green', if([$Status] == 'Amber', 'ms-bgColor-yellow', if([$Status] == 'On Hold', 'ms-bgColor-teal', ''))))"
            },
            "style": {
              "flex": "0 0 173px",
              "height": "108px",
              "box-sizing": "border-box",
              "padding": "12px 10px",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size":"15px",
                  "font-weight":"700",
                  "line-height": "0.5em"
                },
                "txtContent": "Status"
              },
              {
                "elmType": "div",
                "style": {
                  "color": "#fff",
                  "font-size": "70px",
                  "line-height": "1em"
                },
                "attributes": {
                  "iconName": "=if([$Status] == 'Red', 'StatusCircleErrorX', if([$Status] == 'Green', 'CheckMark', if([$Status] == 'Amber', 'StatusCircleExclamation', if([$Status] == 'On Hold', 'Remove', ''))))"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

[#19]

@SVaibhav, you, Sir, are amazing!

It worked perfectly :)

Thank you so much for your help with this! I appreciate that!

[#20]

Am I right that the enhancements of the list view web part are not yet available in the on prem version of sharepoint 2019? Any ideas when these will be shipped over to the on prem version? I put some column formatting in a library view column and they work fine. All the formatting is gone when I put this view into a modern web part, which I am quite sad about ;) Any comments about the timeline would be helpful. Thank in advance, Nils

[#21]

Hi @LHMinu 

Thanks for the appreciation :)

The release which has the fix for the list formatting for web-part is now live. You try using your original JSON too, and that should work as expected!