0

I am attempting to troubleshoot a formatting issue with JSON and actually found a Microsoft example that has the same problem for me. I developed a list using the same column names as the code below:

  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "tileProps": {
    "height": "250",
    "width": "350",
    "hideSelection": true,
    "formatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "stretch",
        "margin-bottom": "16px",
        "min-width": "150px",
        "flex-grow": "1",
        "justify-content": "space-around",
        "padding": "5px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "95%",
            "height": "92%",
            "box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
            "overflow": "hidden",
            "border-radius": "2px",
            "padding-left": "16px",
            "padding-top": "16px"
          },
          "attributes": {
            "class": "ms-bgColor-neutralLighterAlt"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "text-align": "left"
              },
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "color":"#333333",
                    "font-size": "16px",
                    "font-weight":"600",
                    "margin-bottom":"5px"
                },
                  "txtContent": "[$Title]"
                },
                {
                  "elmType": "div",
                  "style": {
                    "color":"#333333",
                    "font-size": "14px",
                    "line-height":"1.8"
                },
                  "attributes": {
                    "class": "sp-row-listPadding"
                  },
                  "txtContent": "[$Feedback]"
                },
                {
                  "elmType": "button",
                  "customRowAction": {
                    "action": "defaultClick"
                  },
                  "txtContent": "Give feedback",
                  "attributes": {
                    "class": "sp-row-button"
                  },
                  "style": {
                    "display": {
                      "operator": "?",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@me",
                            "[$Assigned_x0020_To.email]"
                          ]
                        },
                        "",
                        "none"
                      ]
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

However I am not getting this nice flex box look: List items show horizontally

It simply breaks the JSON code and doesn't work. Is there something I'm missing? I feel like it might be something glaringly obvious but after a day and a half of staring, I think I'm too close to the picture.

2

This view formatting only works in the Tiles view.

enter image description here

The format expects the Title field

The format expects a text column with an internal name of Feedback

The format expects a person column with an internal name of Assigned_x0020_To

If you want to works in the List view, we can use the formatting below.

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Feedback]"
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "Give feedback",
            "attributes": {
              "class": "sp-row-button"
            },
            "style": {
              "display": {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@me",
                      "[$Assigned_x0020_To.email]"
                    ]
                  },
                  "",
                  "none"
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

enter image description here

| improve this answer | |
  • I told you it would be some stupidly glaringly obvious reason!! Thank you so much. – Jennifer Pool Sep 25 '19 at 13:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.