Using JSON to format a SharePoint List

Question

Hello,I know a tiny bit more than nothing about JSON and had someone give me some code to format my list view so it looks less like a spreadsheet and more like a message board. I'm being asked to get rid of the Left/Right scroll bar at the bottom and make the text dynamically wrapped instead. Here is what users are seeing:The department head says having the text cut off on the right side is inconvenient for how this list is being used. They want the column width to not exceed the page width (within reason) and for the row height to increase as needed.I've been using online and print resources to find a solution, but I'm in over my head.&nbsp;Here is the code I was given:{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "attributes": {
    "class": ""
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": "",
        "class": ""
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "[$Note]",
      "attributes": {
        "class": "sp-field-fontSizeLarge"
      }
    }
  ]
}Can anyone tell me what I need to change, add or delete? Or can anyone point me toward a resource I can use to figure this on my own?Your assistance is much appreciated, thank you.&nbsp;&nbsp;

robelliott · Accepted Answer

ITpadawan&nbsp;the JSON I wrote for a similar requirement is shown below and the result is in the attached video and it wraps to whatever the screensize is so there's no horizontal scrollbar.&nbsp;{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "_comment_": "MAIN DIV",
    "attributes": {
      "class": "ms-bgColor-themeLight"
    },
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "98%",
      "border-radius": "5px",
      "background-color": "#08526b"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "left",
          "max-width": "98%",
          "min-width": "205px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "font-size": "15px",
              "font-weight": "normal"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "='Question: ' + [$Question] + ' ' + [$SubmittedOn] + ' ' + [$Email]",
                "style": {
                  "display": "=if([$Question] == '', 'none', 'block')",
                  "padding-top": "0px",
                  "margin": "0 20px 20px 0",
                  "color": "white"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "_comment_": "DIV TWO",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "align-items": "left",
          "max-width": "98%px",
          "min-width": "155px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "font-size": "15px",
              "txtContent": "='Answer: ' + [$Answer]",
              "font-weight": "normal",
              "color": "white"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "='Answer: ' + [$Answer]",
                "style": {
                  "padding-right": "5px",
                  "display": "=if([$Answer] == '', 'none', 'block')"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "font-size": "15px",
              "font-weight": "normal"
            }
          }
        ]
      }
    ]
  }
}&nbsp;Github is a good resource for examples of different types of column and view formatting here.&nbsp;RobLos GallardosIntranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)&nbsp;&nbsp;

Forum Discussion

Using JSON to format a SharePoint List

Share

Resources