Having two headers in the SP online form

Question

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"
  }
}

Answer 1

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:

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

Documentation: Configure the list form