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...
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', ''))))"
}
}
]
}
]
}
]
}
}
SVaibhav, you, Sir, are amazing!
It worked perfectly 🙂
Thank you so much for your help with this! I appreciate that!
It worked perfectly 🙂
Thank you so much for your help with this! I appreciate that!
- 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
