How to customize a SharePoint modern list form

This post is the first in a little series of articles on how to customize SharePoint list forms in modern SharePoint 2019 and SharePoint Online. In this first article, we look at the options available to you natively in SharePoint. Note that the content is current as of this writing (June 2020), but it may (or almost certainly will) change as Microsoft makes updates, including the addition of Microsoft Lists.

Why customize a SharePoint list form?

In a modern SharePoint list when you click +New to add an item, or click on an item to display or edit its content, you’re presented with a nice panel that slides out from the right. You stay in context on your page, and you’re not taken to another page where you must navigate back to the list.

Also, the data entry interface is getting better and better. Fairly recently, a helpful data type icon was added to the form, allowing you to see what type of value to enter. There have also been recent improvements in the UI for some specific field types, such as dates and links.

Data type icons in SharePoint list form

But still, there are times when the built-in form isn’t enough. Maybe you have so many fields that people must scroll down and down to view and enter them all, so you’d like a different layout. Or maybe you want to add some logic to some fields, such as hiding one field based on the value in some other field or based on who’s viewing the form. Cases like these are what we want to help with in this blog series. In this post, we’ll talk about what you can do to customize list forms using SharePoint “out of the box”.

How to customize a SharePoint modern list form out of the box

  1. Open any of the three forms from within the list: New Form (click +New), Display Form (click on an item), or Edit Form (select an item and click Edit). Changes you make will apply to all three forms.
  2. At the top of the form, click Edit form
  3. Select Edit columns from the dropdown (we’ll look at Customize with Power Apps in another article)Edit columns to customize SharePoint list form
  4. A narrow panel opens on the right entitled Edit columns in the form
  5. Drag the fields up and down to rearrange them. Or click to the far right of a field to access Move up and Move down options.
  6. Click on the checkboxes to hide or display fields. Note that required fields cannot be hidden (the checkboxes are greyed out).
  7. Some types of fields can be conditionally hidden. If you see the Edit conditional formula option when you click to the far right of a field, then this is available. See details and formula examples here.
  8. Coming soon, you’ll be able to use JSON code to modify a form’s header and footer, as shown below.
  9. Also coming soon, you can modify a form’s body with JSON code, as shown in this example from Microsoft:

New features coming soon to customize SharePoint list forms

Some things to think about

Currently, list form customizations are not supported in the SharePoint mobile app, due to their requiring CSS to work. However, Microsoft has said they plan to support list form customizations in the upcoming Microsoft Lists mobile app. For now, if you wish to use a customized form from the SharePoint mobile app, you can go to Site Contents in the app. This will open a browser session and you can open your list from there.

The customizations described above can be performed by anyone with at least Contribute permission to the list. By default, this will include anyone who’s a Member of the site, as they have Edit permission. This could mean that others might change customizations you have made. 

If it’s a problem for your organization that form customizations can be changed by any site member, you may wish to consider using Lightning Forms to customize your modern lists. With Lightning Forms, only a user with Full Control will have access to the customization interface. After a form is customized, people with only member access cannot see the built-in Edit Columns link. In addition, Lightning Forms offers far more configuration options than SharePoint’s built-in form customization, and all with no code at all!

Webinar – How to Customize Modern SharePoint List Forms with Lightning Forms.

Learn how to customize SharePoint Lists whist retaining the Modern, Responsive Side Panel Experience. 

Related Posts
Clear Filters

6 Comments

Patrick Bender
Reply
18th September 2020 at 9:23 am

Hi,
Where can i find mor information about the styling the body of a form with JSON?
You referred to a Microsoft example, tried to find it without success.

    Sandy Ussia
    Reply
    21st September 2020 at 12:53 am

    Hi Patrick,
    As far as I’m aware, this feature isn’t quite yet available – still “coming soon”. I believe it’s this roadmap item, which says it will release in September, but I don’t see it available in SharePoint lists yet: https://www.microsoft.com/en-us/microsoft-365/roadmap?featureid=64165
    There may be more news about it at Microsoft Ignite this week.
    If you’d like to have more control over the look and feel of your SharePoint forms, without needing to use JSON at all, you may wish to look at our Lightning Forms tool: https://lightningtools.com/product/sharepoint-modern-form-designer

    Ashutosh Agarwal
    Reply
    20th March 2021 at 3:01 am

    Can we show/hide fields based on form type, like some fields hidden in new form but available in edit form out of the box in sharepoint modern list?

      Sandy Ussia
      Reply
      23rd March 2021 at 3:57 am

      Hi Ashutosh, there is not currently a way to create separate functionality in the New form versus Edit form in the built-in SharePoint list form customizations. To do that, you would need to customize the forms with Power Apps or with a third-party solution such as Lightning Forms (see the link above).

Philip Figari
Reply
19th May 2021 at 4:51 pm

Hi, you mentioned ‘[..] maybe you want to add some logic to some fields, such as hiding one field […] based on who’s viewing the form.’.. Can you direct me to the answer to that?

Add Comment