Forum Discussion
Column formatting not showing when view shown in a List Web Part (Modern Page and List)
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', ''))))"
}
}
]
}
]
}
]
}
}
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', ''))))"
}
}
]
}
]
}
]
}
}
- LHMinuSep 10, 2019Copper ContributorSVaibhav, you, Sir, are amazing!
It worked perfectly 🙂
Thank you so much for your help with this! I appreciate that!- ndeuschSep 12, 2019Copper ContributorAm 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