0

Trying to replicate the layout of the news.aspx page - main div for row (linked to item), a child div to contain and size up the thumbnail, child divs for thumb, title, description, author etc. The idea is to have the thumb floated left, then the title and description to the right on separate lines with ideally the thumb and title linked to the item.
I have it working except for the div that contains the thumb. I can't seem to figure out why I'm getting a "duplicate children" error on the template I'm using (disregard styling etc - am going blind trying to isolate/configure all the brackets):

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
    "elmType": "div",
    "_comment_": "MAIN DIV",
    "style": {
        "display": "flex",
        "flex-wrap": "wrap",
        "align-items": "stretch",
        "flex-direction": "row",
        "padding": "20px",
        "margin-bottom": "16px",
        "max-width": "930px",
        "border-radius": "8px"
    },
    "attributes": {
        "class": "ms-bgColor-neutralTertiaryAlt"
    },
    "children": [
        {
        "elmType": "a",
        "attributes": {
            "class": "ms-borderColor-neutralLight",
            "target": "_blank",
            "href": "[$FileRef]"
        },
        "style": {
            "display": "block"

        },

        "children": [
            {
            "elmType": "div",

            "style": {
                "float":"left",
                "width": "274px",
                "height": "154px"
            },

            "children": [

                {
                    "elmType": "img",
                    "attributes": {
                        "src": "[$BannerImageUrl]"
                    },
                    "style": {
                        "flex-grow": "1",
                        "display": "flex",
                        "flex-direction": "column",
                        "flex-wrap": "nowrap",
                        "align-items": "stretch",
                        "width": "100%",
                        "height": "100%",
                        "object-fit": "cover"
                    }
                }
            ]
        }
    ],
        "children": [{
                "elmType": "div",
                "_comment_": "DIV TWO",
                "style": {
                    "flex-grow": "1",
                    "display": "flex",
                    "flex-direction": "column",
                    "flex-wrap": "nowrap",
                    "align-items": "center",
                    "max-width": "310px",
                    "min-width": "205px",
                    "margin-top": "8px"
                }
            }

        ]
    }
]
}

}

1 Answer 1

0

You have added two children node inside the a tag that's not allowed.

You can try below JSON

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "930px",
      "border-radius": "8px"
    },
    "attributes": {
      "class": "ms-bgColor-neutralTertiaryAlt"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "class": "ms-borderColor-neutralLight",
          "target": "_blank",
          "href": "[$FileRef]"
        },
        "style": {
          "display": "block"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "float": "left",
              "width": "274px",
              "height": "154px"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "[$BannerImageUrl]"
                },
                "style": {
                  "flex-grow": "1",
                  "display": "flex",
                  "flex-direction": "column",
                  "flex-wrap": "nowrap",
                  "align-items": "stretch",
                  "width": "100%",
                  "height": "100%",
                  "object-fit": "cover"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "center",
              "max-width": "310px",
              "min-width": "205px",
              "margin-top": "8px"
            },
            "txtContent": "DIV TWO"
          }
        ]
      }
    ]
  }
}

It will give below output.

enter image description here

Hope it will help to you. Please mark this as answer if it works for you.

You can find many samples at https://pnp.github.io/List-Formatting/

1
  • This answer seems to suggest that nested children are allowed in column formatting. I am trying to implement nested children, but it is not working for me. I have a detailed question with steps to reproduce - if anyone could assist it would be much appreciated: stackoverflow.com/q/75406639 . Thank You. Apr 6, 2023 at 7:01

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.