SOLVED

Using JSON to format a SharePoint List

Copper Contributor

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:

Screenshot 2022-01-08 162559.png

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. 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. 

 

2 Replies
best response confirmed by ITpadawan (Copper Contributor)
Solution

@ITpadawan 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.

 

{
  "$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"
            }
          }
        ]
      }
    ]
  }
}

 

Github is a good resource for examples of different types of column and view formatting here.

 

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

 

 

@RobElliott That was amazing! Thank you so much! I had been trying to format the column and I feel a bit dim for not thinking to format the view. 

I'm really interested in learning to understand JSON better and to be able to write my own code. I truly appreciate your aid with this. Good health and good cheer to you! 

Lizzie

The IT Padawan

1 best response

Accepted Solutions
best response confirmed by ITpadawan (Copper Contributor)
Solution

@ITpadawan 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.

 

{
  "$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"
            }
          }
        ]
      }
    ]
  }
}

 

Github is a good resource for examples of different types of column and view formatting here.

 

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

 

 

View solution in original post