Category: json

SharePoint enables us to collect information in ways beyond paper forms or even digitized Word or PDF forms. As we use it for more processes, you’re likely to run into situations where you wish for a higher level of customization but don’t want to go so far as using Power Apps for a simple need. One such need, as suggested by Jacqueline Vo on LinkedIn, was for moving the Attachments field on the default SharePoint form. And in this post, we’ll do just that.

Want to remove it altogether? Check out How to remove the attachments field from a SharePoint list’s new item form.

Introduction

By default, the attachments field is always at the bottom of the SharePoint new item form. However, there may be cases where you want to move the attachments field up to improve the flow of data entry or consumption. For example, if you are creating a reimbursement request, you may want to enter the request title and description, upload receipts, and then describe the receipts and amounts after.

How to rearrange fields on the SharePoint new item form using JSON

1. Click the New button in the SharePoint list where you want to move the attachments field up.
2. Click the Edit form button in the upper right corner of the form.
3. Click Configure layout.

4. Select Body from the dropdown menu and paste the JSON code (see below) into the JSON editor

4. Replace the sample column names in the JSON code below with your own columns’ display names.
5. Click Save.

The following two sections will give you two examples of ways you can use this method to customize your form:

• One basic, three-section form layout
• One four-section form layout with section headers

Without Section Headers

Here is an example of the JSON code you might use to simply rearrange the fields on the form into three sections – particularly, in our example, the Attachments column into a middle section:

{
    "sections": [
        {
            "displayname": "",
            "fields": [
                "Title",
                "Description"
            ]
        },
        {
            "displayname": "",
            "fields": [
                "Attachments"
            ]
        },
        {
            "displayname": "",
            "fields": [
                "Category",
                "Priority",
                "Due Date"
            ]
        }
    ]
}

Here’s an example of how this code, with a few additional columns, might look. Notice I added an Images column in the same section so all “attachment-like” content is done in one spot on the form.

With Section Headers

Here is an example of the JSON code you might use to customize a SharePoint new item form that includes section headers to help break the form into four logical groupings. The main difference is the inclusion of a value (the heading) between the double quotes that follow "displayname":

{
    "sections": [
        {
            "displayname": "Trip description",
            "fields": [
                "Reason for travel",
                "Requester",
                "Destination",
                "Travel start date",
                "Travel end date"
            ]
        },
        {
            "displayname": "Documentation",
            "fields": [
                "Attachments"
            ]
        },
        {
            "displayname": "Airfare",
            "fields": [
                "Airline",
                "Estimated airfare"
            ]
        },
        {
            "displayname": "Hotel",
            "fields": [
                "Hotel",
                "Estimated hotel cost"
            ]
        }
    ]
}

Here’s a visual example of how this form might look. Notice the attachments field is now below the Trip description section, but above Airfare.

Working with additional columns and sections

The examples provided above will get you started – but you may want more than three or four sections, or have fewer or more columns in your list. Here are some general tips for adjusting this code to suit your needs:

Basically, each additional column must:

• Be inside double quotes
• Be separated from the next column by a comma
• The last column listed in a section doesn’t need a comma after its quotes

And each section must:

• Start with "sections": [ { "displayname": "Optional section name", "fields": [
• And end with ] }
• Have a comma between each section’s code (except after the last one)

Also keep in mind that columns added later, or left out of the code, will be added to the bottom of your form automatically. Don’t forget to update your code to place it in the section you’d like.

Why do I need sections if I just want all fields in one?

If you’re not working with the Attachments column specifically, you can bypass the JSON code altogether and simply use the Edit columns feature to rearrange, show, and hide columns as you please. The attachments column will always appear last in this case.

But moving the Attachments field within the form requires that you place it in a section strategically. Simply listing it in a specific order all in one section will still place it at the bottom of your form as seen here. On the right, it’s listed in the code in the middle, but since it’s in the same section as all other fields, it still gets placed at the bottom due to the column ordering (Edit columns settings) taking precedence.

This is a good thing, really, because your want your JSON formatting to cooperate with the column ordering functionality for easier updates later. In other words, you and your colleagues can reorder, show, and hide columns as you normally would using the Edit columns option on the form and your JSON sections will still be respected. You’d simply be rearranging the fields within each respective section you set up in the code.

So, if you only want to move the Attachments column, consider an approach like the first example in this post: Section 1 is a few general fields, Section 2 is only Attachments, and Section 3 is the rest of the fields. Don’t use any headers, and your form will still feel like a single-sectioned form.

Conclusion

In conclusion, I have shown you how to move the attachments field up on a SharePoint new item form using JSON. This technique can be used to rearrange all of the columns on the form into as many, or as few, sections as you want. Just remember that you need at least three sections if you intend for Attachments to be somewhere in the middle. If you want to learn more about customizing SharePoint forms, check out Configure the list form | Microsoft Learn.