Customize SharePoint Body Form Layout using JSON Code

Question

Hello @Ling Zhou_MSFT Community Members!

Any help will be greatly appreciated!

I have searched for information on how to customize the body of a SharePoint form using JSON Code. Everywhere, it shows a horizontal column layout. But I need a Two-column Layout design in a SharePoint form. Please help me on this!

I will provide the image. Please check it out once if it is possible!

Thanks!

Regards

Chandrika

Answer 1

Hi @Chandrika Kambala,

Ok, Let's use JSON to do this. Please refer to the following steps:

1. Open the List or Library: Navigate to the list or library where you want to customize the form.
2. New an Item: Click on New an item button.
3. Configure Layout: At the top of the form, click on the dropdown button to expand the edit form settings and select the "Configure layout" option. This will open a format pane where you can select the part of the form you want to customize.
4. Select Body: In the format pane, select "Body" on the "Applying formatting to" field.
5. Using the following JSON, please replace each section with your two fields. Add section until you show all your fields.

      {
        "sections": [
          {
            "displayname": "SectionA",
            "fields": [
              "Title",
              "ProjectStartDate"
            ]
          },
          {
            "displayname": "SectionA",
            "fields": [
              "ProjectEndDate",
              "PercentComplete"
            ]
          },
          {
            "displayname": "SectionB",
            "fields": [
              "TaskType",
              "DueDate"
            ]
          },
          {
            "displayname": "SectionC",
            "fields": [
              "StartDate",
              "AssignedTo"
            ]
          },
          {
            "displayname": "SectionD",
            "fields": [
              "TaskDescription",
              "Attachments"
            ]
          },
        .....
        ]
      }
   

Please note:

• According to the official documentation, JSON only divides the form from a single column into multiple columns. Based on the official image and my test results, it seems to divide the form into three columns by default. JSON can't divide the form into two columns; the default is to divide it into three columns.
• If we want to show only two columns, we can only add two fields per section. But the final form is still divided into three columns, and we are only using two of them. Here is my test result:

If you have any questions, please do not hesitate to contact me.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. It will be beneficial to more community members reading here. Your contribution will be highly appreciated.

Answer 2

Hi @Chandrika Kambala,

Hope you are doing well.

I looked at your image and it seems to me that SharePoint JSON can't dividing your form into two columns.

SharePoint JSON can only configure custom body with one or more sections. Configuring form body will switch your list or library form layout from single-column to a multi-column layout.

However, we can't guarantee that the form is split into two columns (it's impossible to set how many columns it's split into). I tested it and you can see that the form is divided into three columns.

The best way to split a form into two columns is to customize a SharePoint form using Power Apps. Here are the exact steps:

1. Open Power Apps:
   • Go to your SharePoint list.
   • Click on Integrate > Power Apps > Customize forms.
2. Edit the Form:
   • In Power Apps Studio, select the SharePointForm1.
   • Under Display > Fileds >Select the fields you want to display on the form. The columns in your view are not automatically added to the form here, you need to select them manually.
   • Under Display > Snap to columns > Columns. Input 2 divides the form into two columns.
   • You can long press the left mouse button to select a field and drag it up and down to modify the order of the fields or click on the move up and down buttons to move it.
3. Save and Publish:
   • Once you're satisfied with the layout, click Save and then Publish to apply the changes to your SharePoint list.
4. Go back to your list and you can see:

Here I just divided the form into two columns. Power Apps can do more than that, it allows you to design very colorful forms, add form checks and customize the submission behavior of the form and so on.

The important thing is that it uses a small amount of code and even non-developers can get started quickly.

If you're new to this, start with these articles:

• Customize a Microsoft Lists or SharePoint form by using Power Apps
• Understand SharePoint forms integration

If you have any questions, please do not hesitate to contact me.

Moreover, if the issue can be fixed successfully, please click "Accept Answer" so that we can better archive the case and the other community members who are suffering the same issue can benefit from it.

Your kind contribution is much appreciated.