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/

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.