1. Home
  2. Wissensdatenbank
  3. Microsoft
  4. SharePoint
  5. Hinzufügen einer Kopfzeile zum SharePoint-Listenformular

Hinzufügen einer Kopfzeile zum SharePoint-Listenformular

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“.

Schritt 2

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

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

Schritt 4

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

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.

War dieser Artikel hilfreich?

Ähnliche Artikel

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Veröffentlicht am - 20. Mai 2023
Geändert am - 20. May 2023
Ansichten - 448
Likes - 0