SharePoint List's Edit Form with Form Formatting Shows Up Blank

Frequent Visitor

Hello,

 

A user in our company has created a List, for which, in Modern View, they've added Form Formatting for the Header and Body. Nothing too fancy, just a few layout and style changes.

 

However, since a few days (not sure how long after the form formatting was implemented), the pop-up Edit Form has been completely blank. No data, no fields, nothing, just plain white panel. Same happens when you try to Edit the Form's layout again via Form Formatting:

AsquareM_0-1644493938730.png

 

 

I've been able to reproduce this issue with the following steps:

1. Created the same list in other sites (using Create from Existing option).

2.  When you first open the list, add any item and try to then edit it, the Edit Form displays properly. However, the moment you refresh the page, the Edit Form Blankness issue starts.

Clearing cache and cookies does not help, the form still looks blank. Using a different browser/opening the List in an Incognito window also just helps in the first session - the moment you refresh the page/visit the list again, the blankness resumes.

 

How the Form is supposed to display:

AsquareM_1-1644494105035.png


Using the Display Form link (accessible by clicking on the Copy Link option atop the form), when opened in a new tab, displays the Item Details correctly. (i.e. the Display Form displays as expected, without any issue).

 

If you check the console when you try to open the Edit Form for any item, this issue appears every time:

AsquareM_2-1644494303130.png

Along with a bunch of other angry errors that I'm not sure are relevant to this issue or not:

AsquareM_3-1644494333545.png

(from a file called 'plt.odsp-common.js')

 

If I try to remove the JSON Formatting, and save the change, it simply doesn't reflect - when you open the form again, the changes are still there. Same issue happens when you try to re-add the JSON formatting (I intended to add one JSON Formatting change at a time to see which part of the code could be causing the issue), it simply doesn't re-add the formatting changes (or if it is making the change, it takes days to reflect).

 

Has anybody else encountered such an issue, or maybe has any idea as to why this issue could be happening?

 

P. S. Adding the Form Formatting JSON code for Header and Body, for reference -

Header:

{
    "debugmode": "false",
    "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": "",
                        "class": "ms-fontSize-42 ms-fontWeight-regular  ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=''+[$Title]"
                }
            ]
        }
    ]
}

Body:

{
    "sections": [
        {
            "displayname": "Employee",
            "fields": [
                "Title",
                "Company",
                "BR-Code",
                "UserID",
                "Activity",
                "Shift0"
            ]
        },
        {
            "displayname": "Details",
            "fields": [
                "Date",
                "Reporter",
                "Comments",
                "Category",
                "Reported by Backup",
                "Typ",
                "Details",
                "Role",
                "ReportedDep"
            ]
        },
        {
            "displayname": "Feedback",
            "fields": [
                "Feedback",
                "FeedbackedBy",
                "FeedbackedBy backup",
                "UpdateCheck"
            ]
        }
    ]
}

 

0 Replies