Help needed with JSON to customize a sharepoint list

Question

I have a SharePoint list which has 5 columns. My problem is that my data is not aligned with the columns. What do I have to changed so that my data is aligned with their columns:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themePrimary ms-fontColor-white"
        },
        "style": {
          "display": "=if(@rowIndex == 0, 'flex', 'none')",
          "font-weight": "bold",
          "font-size": "12px",
          "width": "100%",
          "padding": "4px"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "Datum",
            "style": {
              "flex-grow": "1"
            }
          },
          {
            "elmType": "div",
            "txtContent": "00:00 - 07:59",
            "style": {
              "flex-grow": "1"
            }
          },
          {
            "elmType": "div",
            "txtContent": "08:00 - 15:59",  
            "style": {
              "flex-grow": "1"
            }
          },
          {
            "elmType": "div",
            "txtContent": "16:00 - 23:59",  
            "style": {
              "flex-grow": "1"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Opmerkingen",  
            "style": {
              "flex-grow": "1"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-borderColor-neutralQuaternary"
        },
        "style": {
          "display": "flex",
          "font-size": "12px",
          "width": "100%",
          "padding": "0 4px",
          "border-bottom-width": "1px",
          "border-bottom-style": "solid"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Datum]",
            "style": {
              "flex-grow": "1"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Before]",  
            "style": {
              "flex-grow": "1"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Between]",  
            "style": {
              "flex-grow": "1"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$After]",  
            "style": {
              "flex-grow": "1"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Opmerkingen]", 
            "style": {
              "flex-grow": "1"
            }
          }
        ]
      }
    ]
  }
}
enter code here

Post a sample input values and output values after JSON format has been applied — Matiur Rahman
– Matiur Rahman, Commented Feb 4 at 20:36
Screenshot of the issue that you're facing.. it's easier to understand when you have a visual clue to debug your code — Matiur Rahman
– Matiur Rahman, Commented Feb 4 at 22:39
Hi, thank you for your response. I have added an image. Gr. P — Peter Kiers
– Peter Kiers, Commented Feb 6 at 14:57

Matiur Rahman · Accepted Answer · 2025-02-08 21:29:24Z

Try the updated json below and let me know. The main difference is that I've added "max-width": "20%" for each div element. You can adjust css properties like text-alignment as you deem necessary.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themePrimary ms-fontColor-white"
        },
        "style": {
          "display": "=if(@rowIndex == 0, 'flex', 'none')",
          "font-weight": "bold",
          "font-size": "12px",
          "width": "100%",
          "padding": "4px"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "Datum",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          },
          {
            "elmType": "div",
            "txtContent": "00:00 - 07:59",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          },
          {
            "elmType": "div",
            "txtContent": "08:00 - 15:59",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          },
          {
            "elmType": "div",
            "txtContent": "16:00 - 23:59",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Opmerkingen",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-borderColor-neutralQuaternary"
        },
        "style": {
          "display": "flex",
          "font-size": "12px",
          "width": "100%",
          "padding": "0 4px",
          "border-bottom-width": "1px",
          "border-bottom-style": "solid"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "=toLocaleDateString([$Datum])",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Before]",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Between]",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$After]",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Opmerkingen]",
            "style": {
              "flex-grow": "1",
              "max-width": "20%"
            }
          }
        ]
      }
    ]
  }
}

Stack Exchange Network

Help needed with JSON to customize a sharepoint list

1 Answer 1

Your Answer

Hot Network Questions

Help needed with JSON to customize a sharepoint list

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions