User Profile
florianwpunkt
Copper Contributor
Joined Feb 22, 2023
User Widgets
Recent Discussions
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])" } ] } ] } }
