0

I am facing an issue with having two headers in SP online list form.

Can you please help me to merge these two?

Please see the JSON codes below:

This is the bar code:

{
    "debugMode": true,
    "elmType": "div",
    "txtContent": "Test ICT Risk Assessment list",
    "style": {
        "height": "40px",
        "font-size": "18px",
        "font-weight": "600",
        "padding": "10px",
        "color": "#fff",
        "background-color": "#383794"
    }
}

This is the image code:

{
  "elmType": "img",
  "style": {
    "width": "100%",
    "max-width": "100%"
  },
  "attributes": {
    "src": "https://<tenant>.sharepoint.com/sites/siteName/LibraryName/MyImage.png"
  }
}

1 Answer 1

0

You cannot use two separate JSON codes in configure header layout section of list forms. So, you have to merge it into single JSON like below:

{
  "elmType": "div",
  "style": {
    "display": "grid"
  },
  "children": [
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "img",
          "style": {
            "width": "100%",
            "height": "300px"
          },
          "attributes": {
            "src": "=@currentWeb + '/SiteAssets/Microsoft products banner.jpg'"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "width": "100%",
        "height": "30px",
        "font-size": "18px",
        "font-weight": "600",
        "padding": "10px",
        "color": "#FFFFFF",
        "text-align": "center",
        "background-color": "#383794"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Error"
          },
          "style": {
            "vertical-align": "middle"
          }
        },
        {
          "elmType": "span",
          "txtContent": "NOPTA ICT Risk Assessment list",
          "style": {
            "margin-left": "10px",
            "vertical-align": "middle"
          }
        }
      ]
    }
  ]
}

Output:

enter image description here

Also, you can change the iconName as per your requirements. Check all available icons at: Office UI Fabric Icons.

Documentation: Configure the list form

0

Your Answer

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

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