0

I have formatted a list to look like the one below. I would like to wrap them in a DIV so i can have a header above them named "Useful Tools" or something. I can't seem to get a header above them.

I copied and pasted the JSON I am using below, too.

Any help is appreciated!

enter image description here

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideColumnHeader": "true",
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "href": "[$_x0055_rl1]",
      "target": "=if([$NewTab] == true, '_blank', '')"
    },
    "style": {
      "width": "100%"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "width": "100%",
          "min-height": "10px",
          "margin-right": "10px",
          "margin-top": "10px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center",
              "margin": "auto"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title"
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "[$Icon]",
                  "class": "ms-fontSize-su"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
1
  • Hi, did you try my solution given below? let me know if you need any further help with this. Oct 13, 2022 at 11:15

1 Answer 1

0

You can use @rowIndex == 0 condition to add header before only first item in list view.

Here's example of custom header generated using JSON view formatting:

enter image description here

Sample reference: Custom Header

1
  • Hi @Madeline, did you try above solution? is it working you? Sep 23, 2022 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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