0

I have the below json code added to the header section of a item list editing window. The code adds two links, one next to each other.

I'd like the second link to appear either in a new row (i.e. under the first link) or, should this be not feasible, I'd like the second link to be preceded by 1 or 2 tabs.

enter image description here

    {
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "link",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "32px"
                    }
                },
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "link",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "32px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "18px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "Add new project",
                    "attributes": {
                        "href": "https://www.google.com",
                        "target": "_blank"
                    }
                },
                {
                    "elmType": "a",
                    "txtContent": "Add new customer",
                    "attributes": {
                        "href": "https://www.bing.com",
                        "target": "_blank"
                    }
                }
            ]
        }
    ]
}

1 Answer 1

0

Try using JSON for header layout like:

{
  "elmType": "div",
  "style": {
    "width": "99%",
    "display": "flex",
    "flex-direction": "column"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "100%",
        "display": "block"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "link",
            "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
            "title": "Details"
          },
          "style": {
            "height": "32px"
          }
        },
        {
          "elmType": "a",
          "txtContent": "Add new project",
          "style": {
            "position": "absolute",
            "margin-top": "10px",
            "margin-left": "10px"
          },
          "attributes": {
            "href": "https://www.google.com",
            "target": "_blank"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "width": "100%",
        "display": "block"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "link",
            "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
            "title": "Details"
          },
          "style": {
            "height": "32px"
          }
        },
        {
          "elmType": "a",
          "txtContent": "Add new customer",
          "style": {
            "position": "absolute",
            "margin-top": "10px",
            "margin-left": "10px"
          },
          "attributes": {
            "href": "https://www.bing.com",
            "target": "_blank"
          }
        }
      ]
    }
  ]
}

Output:

enter image description here

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.