1

How can I merge the two sets of code below so they show together in the Header?

Picture File for Header:

{
  "elmType": "img",
  "style": {
    "width": "100%",
    "max-width": "100%"
  },
  "attributes": {
    "src": "https://company.sharepoint.com/sites/blabitty/Shared%20Documents/StepUpAwardAppHeader_v6.png"
  }
}

and then under the picture have the text that is clickable link to guidelines for submission:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "a",
    "txtContent": "*Step Up Program Award Guidelines",
    "attributes": {
        "class": "ms-fontColor-blue",
        "target": "_blank",
        "href": "https://company.sharepoint.com/sites/blabitty/shared%20documents/step%20up%20program%20award%20guidelines.png?web=1"
    },
    "style": {
        "font-size": "24px"
    }
}

So that when they go to submit a new entry it looks like the demo below:

Final view I am looking for:

Final view looking for

Thanks.

1 Answer 1

0

You can use JSON formatting on list form for header layout. You can use JSON like:

{
    "elmType": "div",
    "style": {
        "display": "block",
        "text-align": "center"
    },
    "children": [
        {
            "elmType": "img",
            "style": {
                "width": "100%",
                "max-width": "100%"
            },
            "attributes": {
                "src": "https://picsum.photos/500/200"
            }
        },
        {
            "elmType": "a",
            "txtContent": "*Step Up Program Award Guidelines",
            "attributes": {
                "class": "ms-fontColor-blue",
                "target": "_blank",
                "href": "https://company.sharepoint.com/sites/blabitty/shared%20documents/step%20up%20program%20award%20guidelines.png?web=1"
            },
            "style": {
                "font-size": "24px"
            }
        }
    ]
}

Output:

enter image description here

Documentation: Configure the list form

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.