You can configure a list form in a list or library with a custom header, footer, and form body that contains one or more sections, each of which has fields. Form configuration does not change the data in list items or files; It simply changes how the form is displayed to the user browsing the list or library. Anyone who can create and manage views in a list can use form configuration to configure forms with headers, footers, and body sections.

start

To configure a form in a list or library:

  1. Go to the list or library for which you want to configure the form.
  2. If you are in the list:
    • Open a project to view project details in the display form.
  3. If you are in the document library:
    • Select a file.
    • Selection…
    • Choose more
    • Select properties
  4. At the top of the form, expand the Edit form icon and select ** to configure the layout

The following is an example of custom headers and JSON

Configure the SharePoint list form using JSON

You can configure a list form in a list or library with a custom header, footer, and form body that contains one or more sections, each of which has fields. Form configuration does not change the data in list items or files; It simply changes how the form is displayed to the user browsing the list or library. Anyone who can create and manage views in a list can use form configuration to configure forms with headers, footers, and body sections.

start

To configure a form in a list or library:

  1. Go to the list or library for which you want to configure the form.

  2. If you are in the list:

    • Open a project to view project details in the display form.

  3. If you are in the document library:

    • Select a file.
    • Selection…
    • Choose more
    • Select properties

  4. At the top of the form, expand the Edit form icon and select Config Layout

Configure custom footers

  1. To apply formatting to the footer, in the Formatting pane, select the footer in the Apply Formatting drop-down menu.

  2. Paste your custom footer formatter into the JSON text input area.

    notes

    The form configuration allows you to build custom footers using certain predefined elements and attributes.

  3. Here is an example of custom footer and JSON:

{
    "elmType": "div",
    "style": {
        "width": "100%",
        "text-align": "left",
        "overflow": "hidden",
        "border-top-width": "1px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "width": "100%",
                "padding-top": "10px",
                "height": "24px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "='Contact Details for ' + [$Title]",
                    "attributes": {
                        "target": "_blank",
                        "href": "='https://aka.ms/contacts?email=' + [$Email]",
                        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
                    }
                }
            ]
        }
    ]
}
Copy the code

Configure a custom body with one or more sections

  1. Here is an example of custom body JSON with parts:

    {
    "sections": [
        {
            "displayname": "",
            "fields": [
                "Title"
            ]
        },
        {
            "displayname": "Details",
            "fields": [
                "Department",
                "Email",
                "Country"
            ]
        },
        {
            "displayname": "Application",
            "fields": [
                "Application Id",
                "Approver",
                "Reviewer"
            ]
        }
    ]
}
Copy the code

Once the body is customized with one or more parts, the list or library form switches to a multi-column layout