Hinzufügen einer Kopfzeile zum SharePoint-Listenformular

Adding Header To SharePoint List Form

In diesem Artikel werden wir uns ansehen, wie man dem Formular ein Header-Element hinzufügt. Der Einfachheit halber fügen wir der Kopfzeile ein Logo hinzu. Sie können visuelle Indikatoren, Farbbänder und vieles mehr verwenden. Nutze die Referenzen der SharePoint Formatierungssyntax, damit wird es einfacher 🙂

Kopfzeile hinzufügen

Schritt 1

Klicken Sie auf „Neu“ und wählen Sie „Layout konfigurieren“.

Adding Header To SharePoint List Form
Hinzufügen einer Kopfzeile zum SharePoint-Listenformular 6

Schritt 2

Stellen Sie sicher, dass im Abschnitt Format. Formatierung anwenden auf als ‚Kopfzeile‘ ausgewählt ist.

Adding Header To SharePoint List Form1
Hinzufügen einer Kopfzeile zum SharePoint-Listenformular 7

Schritt 3

Wenden Sie im JSON-Formatierungsfeld den unten stehenden JSON-Code an, um Informationen zum Kopfzeilenabschnitt hinzuzufügen. Hier versuchen wir, ein Logo in die Kopfzeile einzufügen.

Hinweis
Vergewissern Sie sich, dass Sie die „src“ in eine relative Url zu Ihrem Firmenlogo ändern.

{  
    "debugmode": "true",  
    "elmType": "div",  
    "attributes": {  
        "class": "ms-bgColor-white"  
    },  
    "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": "img",  
                    "style": {  
                        "width": "150px"  
                    },  
                    "attributes": {  
                        "src": "RELATIVE URL TO LOGO"  
                    }  
                }  
            ]  
        },  
        {  
            "elmType": "div",  
            "attributes": {  
                "class": "ms-fontColor-blueMid 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": "=if ([$Title] == '', 'New Item', 'Item: ' + [$Title])"  
                }  
            ]  
        }  
    ]  
}  
Adding Header To SharePoint List Form2
Hinzufügen einer Kopfzeile zum SharePoint-Listenformular 8

Schritt 4

Beobachten Sie das Logo, nachdem die Formatierung erfolgreich gespeichert wurde. Eventuell sollten Sie den Browser aktualisieren

Adding Header To SharePoint List Form3
Hinzufügen einer Kopfzeile zum SharePoint-Listenformular 9

Schritt 5

Führen Sie eine Fehlersuche durch, wenn das Logo nicht erscheint. wenn das Logo nicht erscheint. Wenn es immer noch nicht klappt, beobachten Sie, dass die JSON-Formatierung gespeichert wird, und untersuchen Sie eventuelle Formatierungsprobleme mit den Entwicklertools. Sie können den Code aus der Git-Hub-Referenz im Referenzabschnitt kopieren und den Code entsprechend Ihren Anforderungen ändern.

Dieser Beitrag ist auch verfügbar auf: English (Englisch)

War dieser Artikel hilfreich?

Ähnliche Artikel

Hinterlasse einen Kommentar!