Forum Discussion
florianwpunkt
Feb 22, 2023Copper Contributor
SharePoint List JSON Formatting group header
Hello everybody, currently I am struggling with JSON formatting, when a list is grouped by a row.
This is the formatted list without grouping:
And this is the same list with grouping:
Any idea on how i can make the grouping not be treated as an item?
Thanks in advance 🙂
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"height": 300,
"width": 400,
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"padding": "0px",
"align-items": "flex-start",
"justify-content": "flex-start",
"align-content": "flex-start",
"float": "left",
"position": "relative",
"vertical-align": "top",
"background-color": "white",
"margin": "5px",
"border-radius": "5px",
"border-width": "3px",
"box-shadow": "#00000088 0 2px 4px 0"
},
"children": [
{
"elmType": "div",
"style": {
"width": "200px",
"display": "flex",
"flex-direction": "row",
"flex-wrap": "nowrap",
"justify-content": "flex-start",
"align-items": "flex-start",
"align-content": "flex-start",
"margin-top": "5px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "block",
"flex-grow": "0",
"flex-shrink": "1",
"flex-basis": "auto",
"align-self": "auto",
"order": "0",
"font-weight": "bold",
"font-size": "18px",
"width": "80%",
"margin-left": "2px"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"display": "block",
"flex-grow": "0",
"flex-shrink": "1",
"flex-basis": "auto",
"align-self": "auto",
"order": "0",
"align-items": "center",
"width": "20%"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#666666",
"text-align": "center"
},
"txtContent": "[$size]"
},
{
"elmType": "div",
"style": {
"color": "#666666",
"display": "inline-block",
"flex-grow": "0",
"flex-shrink": "1",
"flex-basis": "auto",
"align-self": "auto",
"order": "0",
"margin-left": "35%"
},
"attributes": {
"iconName": "=if([$access] == 'Code', 'Dialpad', 'Lock')"
}
},
{
"elmType": "div",
"style": {
"color": "#666666",
"text-align": "center"
},
"txtContent": "[$location]"
}
]
}
]
},
{
"elmType": "div",
"style": {
"display": "=if([$annotation] == '', '', 'flex')",
"flex-direction": "column",
"flex-wrap": "nowrap",
"justify-content": "flex-start",
"align-items": "center",
"align-content": "flex-start",
"width": "100%",
"height": "28px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "block",
"flex-grow": "0",
"flex-shrink": "1",
"flex-basis": "100%",
"align-self": "auto",
"order": "0",
"color": "black",
"font-size": "12px",
"background-color": "#f3f2f1",
"width": "100%",
"text-align": "center",
"border-radius": ""
},
"txtContent": "=[$annotation]"
}
]
},
{
"elmType": "div",
"style": {
"width": "200px",
"height": "80px",
"background-size": "cover",
"text-align":"center",
"background-repeat": "no-repeat",
"background-position": "center",
"margin-top": "",
"box-shadow": "#00000022 0px 2px 4px 0px"
},
"attributes": {
"class": "ms-bgColor-neutralLighter"
},
"children": [
{
"elmType": "img",
"style": {
"position": "relative",
"height": "100%",
"overflow": "hidden"
},
"attributes": {
"src": "=[$picture]",
"target": "_blank"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"flex-wrap": "nowrap",
"justify-content": "flex-start",
"align-items": "flex-start",
"align-content": "normal",
"margin-top": "4px",
"margin-bottom": "2px",
"margin-left": "2px"
},
"children": [
{
"elmType": "img",
"style": {
"display": "block",
"flex-grow": "0",
"flex-shrink": "1",
"flex-basis": "auto",
"align-self": "auto",
"order": "0",
"margin-right": "5px",
"max-height": "48px",
"border-radius": "50%",
"box-shadow": "#00000022 0px 4px 4px 0px"
},
"attributes": {
"src": "='/_layouts/15/userphoto.aspx?size=S&accountname='+[$owner.email]"
}
},
{
"elmType": "div",
"style": {
"display": "block",
"flex-grow": "0",
"flex-shrink": "1",
"flex-basis": "auto",
"align-self": "center",
"order": "0",
"color": "#666666",
"font-size": "14px"
},
"txtContent": "[$owner.title]"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"flex-wrap": "nowrap",
"justify-content": "center",
"align-items": "stretch",
"align-content": "stretch",
"width": "100%",
"height": "32px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "block",
"flex-grow": "0",
"flex-shrink": "1",
"flex-basis": "100%",
"align-self": "auto",
"order": "0",
"color": "#fff",
"font-size": "14px",
"background-color": "=if([$state] == 'Frei', '#28a745', '#dc3545')",
"width": "100%",
"text-align": "center",
"border-radius": "0px 0px 5px 5px"
},
"txtContent": "=if([$state] == 'Gebucht', [$occupancyDuration] + ' - ' + [$state], [$state])"
}
]
}
]
}
}
I fixed it.
Instead of using the list view I went with the gallery view.
I changed rowFormatter to formatter, float = "center" and gave the gallery item a fixed height and width property.
1 Reply
- florianwpunktCopper Contributor
I fixed it.
Instead of using the list view I went with the gallery view.
I changed rowFormatter to formatter, float = "center" and gave the gallery item a fixed height and width property.