Form formatting: In header section [$FileLeafRef], [$FileRef] coming blank

[NWH-SAmin5]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

Declarative list formatting

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Describe the bug / error

Form formatting: In header section [$FileLeafRef], [$FileRef] coming blank

Steps to reproduce

1. Create document library: TestDocLib
2. Upload sample PDF file
3. Open Properties form by clicking file three dots > More > Properties > Configure layout > Header
4. Add this JSON in header

{
    "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": "PDF",
                        "class": "ms-fontSize-24 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "PDF file"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "24px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralPrimary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "[$FileLeafRef]"
                }
            ]
        },
        {
            "elmType": "a",
            "attributes": {
                "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover",
                "title": "Fullscreen Preview",
                "target": "_blank",
                "href": "[$FileRef]"
            },
            "style": {
                "border": "none",
                "background-color": "transparent",
                "cursor": "pointer",
                "text-decoration": "none"
            },
            "children": [
                {
                    "elmType": "span",
                    "style": {
                        "text-align": "center",
                        "display": "table-cell",
                        "vertical-align": "middle",
                        "font-size": "20px"
                    },
                    "attributes": {
                        "iconName": "OpenInNewTab"
                    }
                }
            ]
        }
    ]
}

Expected behavior

What Should Happen

Form header should display PDF icon, File name, Open in new tab icon

Open in new tab icon should be linked to file url using [$FileRef]

What Actually Happens

Form header is showing only two icons, it is not displaying file name using [$FileLeafRef]

Open in new tab icon href attribute does not have url, so clicking on this icon does not do anything

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[ganesh-sanap]

I have also observed this issue while formatting header layout in properties form of SharePoint document library.

Using [$FileLeafRef] resulting in blank value even when it is available in page context:

[watana2]

Issue still present in 2024.

[isomna72]

August 2024, still not working. Is there any other idea, how to display a Link to the Document in the Header?

[github-actions]

Thank you for taking the time to file an issue. We periodically archive older or inactive issues as part of our issue management process, which automatically closes them once they are archived.

If you’d like to understand more about why and how we handle archived (closed) issues, please see Our approach to closed issues.

We appreciate your contribution and if this is still an active issue with the latest SPFx versions, please do resubmit the details. We needed to perform a cleanup, so that we can start with a clean table with a new process. We apologize for the inconvenience this might cause.