SharePoint List Form – Form Editor
Over the years in SharePoint, there have been several different technologies to use, in order to do some customization to the out-of-box list forms. No more SharePoint Designer for forms, no more InfoPath. Yes, you can use Power Apps to customize forms, but now there’s another alternative!
If you have some pretty basic changes to make to the way your form looks, you can do it with the new form editor, right in the browser in SharePoint/Microsoft Lists! (Microsoft Lists = SharePoint Lists)
Let’s get right to it. I’ve got a list that I created using the travel requests template in SharePoint.
To get to the form editor, you can either click NEW to fill out a new form, or click to open an existing item to view (not edit) it. I’ve found that this experience is less buggy when viewing an existing item, for some reason. So, if you have a brand new list, go ahead and click the New button, fill out the form and save it so that there is at least one item in your list. Then, click the title of that item, to open it up to view it. In this screenshot, you can see that I have created several test items in my list already. The key here is to open and view an existing item, and check out the little Edit Form button at the top right. That’s what we’ll be using throughout this post.
1. Click Edit Form.
2. Click Configure layout.
Side note: If you’re wondering about those other two options. I wrote another post about some interesting things you can do with the Edit Columns option. For the Customize with Power Apps option, here’s a free one-hour online self-paced course where I teach about this: Power Apps Basics.
3. When configuring the layout, there three main options. Header, Body, and Footer. You can click the Learn more link to see the official documentation with an example of some code.
This is done in JSON code. I’m not a programmer.
April Dunham has created a great video called JSON Intro for Microsoft 365 People.
Since this is all done in JSON, and the little code editor (in the screenshot above) is just plain text, it’s easier to write the code by using a JSON editor, so the code looks nicer and is easier to troubleshoot. I use free software that I downloaded, called Notepad++ and this even includes a language setting (on the language menu) that you can set to JSON, and there is a plugin (on the Plugins menu) called JSON Editor, which will tell you if you have errors in your code.
Before we get into the formatting details, here is an example of the final product:
Now let’s break it down:
Header
The part at the top of the form is the header. In this example, I’ve got a little icon of an airplane, and the name of the form “Travel Request”. I’m not going to teach JSON here (I’m not a dev), I’m just going to show you where in the example code you can change it slightly.
Copy and paste Microsoft’s code for the header over to the area for the header. By default, their code has an icon of some people (“Group”) and says “contact details for” (and then the Title of the list item).
Here’s how to change the icon. Here is the list of the icons to pick from. I searched and found the one that looks like an airplane. You can hover over these to see the name. There’s one called Airplane, and one called AirplaneSolid.
Therefore, in the code where it currently says “Group”, I changed it to “Airplane”.
Then, the second part that I have pointed out, is the text shown at the top of the form. Their example combines some text with a field from the list, called Title. I changed mine to just say “txtContent”: “Travel Request”, but as long as you know the system (internal) names of your columns, you can use those in the code, it’s just trickier if you’re dealing with person columns, lookups, or managed metadata. (beyond my JSON skillset)
Body
Next, and more importantly, here is how to configure the body, the main part of your form. The code is MUCH simpler:
{
“sections”: [
{
“displayname”: “Requester Info”,
“fields”: [
“Trip title”,
“Requester”,
“Reason for travel”
]
},
{
“displayname”: “Trip Details”,
“fields”: [
“Destination”
]
}
]
}
Here’s the breakdown. I’ve created two sections in my form. First of all, notice that I haven’t typed all of the field names in the code. Any fields that you leave out will automatically end up at the bottom, in your last section. You can create many sections, but each column can only be in one section. You do not have any control over how many columns are shown, because the form will size itself to whatever resolution the form is being viewed on. My sections are called “Requester Info” and “Trip Details”. Unlike the header and footer code, you can just use the easy display names of your fields here. All you need to do is list them with quotes around each one, and commas in between them. Here, I’ve narrowed my browser window to see what happens. Notice that the “Reason for travel” column in the first section wraps down to the next line.
I’ll add a third section, and will call it “Approval and receipts”. Remember to type the field names exactly, and use commas between fields. Notice that the built in attachments field is listed as well. That one can’t be re-named, but you can type the name of it in the section where you’d like it to appear.
4. After you’ve configured each of the parts, like header, body and footer, you can click Preview to see what it will look like, and click SAVE when finished.
Rearranging columns
If you’d like to rearrange the order that the columns are shown, don’t try and do it in the code, it won’t work. Instead, go to the Edit Columns screen:
You’ll notice that the names of your sections are shown here, and you can drag fields up and down to rearrange them or move them from one section to another.
Footer
The footer works the same way as the header. In Microsoft’s example, their list has a text field called Email, and their footer has a hyperlink to send an email to that address. A footer is not required, so you could just leave this blank. For mine, I’ve tweaked it slightly so that it is just a hyperlink that sends an email to the HR department, but yours doesn’t need a hyperlink, it could just be text, just like the header. Here is mine:
{
“debugMode”: true,
“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”: “=’Send email to HR about ‘ + [$Title] + ‘ trip'”,
“attributes”: {
“target”: “_blank”,
“href”: “=’mailto:’ + ‘hr@contoso.com'”,
“class”: “ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover”
}
}
]
}
]
}
Thanks for reading, and check out my SharePoint, Teams, Power Apps and Power Automate training at my company’s website: iwmentor.com
Here is the Power Hour episode where I demonstrated this list form editor in this hour long video.
Great article for List Form,
any idea about include calculated column into New item form?
I usually accomplish that with Power Apps, by adding a label to the form, and then doing a calculation in that label, so that the value is displayed dynamically.
I liked SharePoint when anyone could use it … now the developers and code jockeys have taken over. Sad.
Anyone CAN use it. SharePoint hasn’t taken any of your options away. The solution she presents here is just a nice to have thing that some people may want. Some of us non-developers and non-code jockeys might want to cut and past some code sometimes. I don’t understand how to write it but I could cut and paste it to make it work.
Any idea if there is a way to get one field, lets say a multi-line text field, to span the entire row? I’ve tried putting that field in its own section within they body, but it will only take up the width of one of the columns
Do you know if there is a way for a field, lets say a multi-line text field can span the entire row? I’ve tried putting that field in it’s own section, but that didn’t work. I’m not sure how to apply a “style width 100%” to that specific field or section, or not sure if it’s possible.
It doesn’t seem possible, but if you use SP lists inside of Teams, they do fill up the page.
Thank you. Is there a way to add a notes column (multiple lines of text) with a wider width span using this format? I’d like to cut down on the amount of text wrap and scrolling where possible.
You can put that field in a section by itself, to achieve something like that.
Thank you Laura. Using this format my comments icon next to edit forms no longer appears. Any idea?
Hi Steve, no I’ve never seen that happen.
Great information. Thanks Laura.
Did you find out how to make the email link in the footer dynamic to eg. the person listed in the responsible field. So for each item the link will send an email to person selected as responsible.
Hi Laura,
Nice Article! Do you know how to change an entry-box tip on the New Item Form, from “Enter value here” to something more specific like “Enter value in this format xxx-xx-xxx”
Thanks
That’s not possible with that form editor, but you can do it in PowerApps with the hint text property.
Thank you very much.
Is there a way to customize the size/width in “body” without going through power app?
thanks in advance
No, not that I know of. You could create sections with just a couple of columns per section, to sort of achieve that.
No, but if you use SP lists inside of Teams, they fill up the page.
Thank you for the article. Do you know if there is a way to add additional text under the title of the form? For example, under your title of ‘Travel Request’, is there any way to add underneath it something like, ‘Please submit one entry per request’. And if so, is there a way to add a bit of code to it to make it a different color, such as red?
Hi, yes there is probably a way to do both of those things with JSON. I don’t know code though, so it would be a matter of figuring out the syntax or finding some kind of JSON visual editor tool.
Hi
On the ‘body’ part I have typed, copied and retype the formula as set out, but it keeps saying ‘enter valid json’ – and the displayname has the red squiggly line underneath.
I have looked on google etc, but can’t seem to find out why it won’t let me use this?
Thanks
If you’re copying Microsoft’s code, I’m not sure why it wouldn’t work. Try it on a completely different list and/or try completely removing all code and starting over?
I am having this same issue. I can’t get it to work anywhere.
Sometimes when copying and pasting code, the quotations end up being a bit odd, and they need to be re-typed.
Hi Laura,
Do you know how to edit a specific form? (EditForm.aspx, NewForm.aspx) These modifications seem to apply to all of the list forms. Often times we like the input (NewForm.aspx) form to show only relevant fields while we hide other “administrative” related fields in the EditForm.aspx. We used to accomplish this via JavaScript but are trying to embrace all things modern. Microsoft was onto something with allowing us to hide fields in the NewForm, but seem to have fallen short by not allowing the same functionality on the EditForm. Love your content Laura!
They don’t provide a way to do that, unfortunately.
Hello, Is there a way to add “Job Title” to an OOB (Out of Box) sharepoint form or is PowerApps the only way?
Power Apps is the only way that I know of.
Thanks much!
This is great, thank you for writing it up. Have you found a good way to pull in a lookup value to the header to make it dynamic? [field].lookupValue doesn’t seem to return anything.
Thank you!
No.
this is possible. In the “txtcontent”: section of the header enter the following:
“=substring([$lookupColumnName],indexOf([$lookupColumnName],’;#’)+2,1000)”
where lookupColumnName is the internal column name referenced in your list (IE the column name referenced in the lookup, not the lookup column name in your current list).
Hello Laura, nice article 🙂
How can I make in header of list if statement that when adding new item shows one text and when showing already existing item outputs other text?
Kind regards
I don’t think that’s possible with this form editor.
Love all that you do! Is there a way to include a hyperlink or button in the footer that would allow the user to Save/Submit the current item and also launch the NewForm again? I have users that need to add lots of rows of data at one time. Thanks!!
No, not that I know of. That kind of thing can be done in Power Apps, but not in this kind of form.
I’d like to create field sections on a list with multiple content types, so the fields would change per the content type selected. can i do this? should it do this?
THANK YOU.
I would typically use a Power App to do that, but yes you could accomplish it with a content type. Check out this old post where I showed how it’s done https://wonderlaura.com/2009/11/12/using-content-types-as-statuses/
Hi, Laura, Thanks for your informative Post. I’m wroking with an enterprise Sharepoint 2019, I can’ find any “Edit Form” option wether in New or Edit forms. I’m not an administrator but the collection owner.
2019 doesn’t have it.
Hi Laura. Is there a way to hide the attachments field? I’ve noticed that it is always there even when attachments is disabled in the list settings.
That’s pretty annoying, isn’t it. I’ve noticed that, but it looks like they’ve locked it down so that you can’t remove it anymore.
Are you sure? I’m looking at a list right now and it’s not showing the attachments column after disabling them.
No, it’s just something I’ve noticed happening in the last couple of weeks. Maybe Microsoft has fixed it?
It’s still there. I just checked but I work on the GCC Microsoft Cloud. Maybe the fix hasn’t made it there yet? Fingers crossed.
I have tried pasting the example section json into the body section and I get an error “Please enter valid json”. “displayname” is underlined. No idea what I am doing wrong here. Any suggestions?
No, it’s a pretty buggy interface, I usually just copy and paste Microsoft’s code examples and it works. I don’t know enough about JSON to know how to troubleshoot it.
Is there any way to add a list of “related items” in the same way as you could in SP2016 by adding the Related Items web part to the item display form?
I don’t know of a way.
Hi Laura – thanks for these tips! I went to edit my form and only a subset of the columns in my list are showing up there, so I think I need to edit the content type (Item) to make the rest of them visible. If I do that, though, will it impact any other lists that also use the “Item” content type? If so, what would you suggest as a workaround?
No, it won’t impact the other lists if you change the settings just in that one list’s content type.
Would it be possible to make the fields in a section wider?
I try to find a better presentation in the body layout of my form for a multiple-line-textfield.
I’m not sure.
Is there any chance to launch a flow button from the footer page?
I’m trying to do it now.
Hi Laura,
A number of us have run into a problem where we add the JSON to the Header/Body/Footer and it looks correct, and previews perfectly, but when we save and exit the customization screen, the JSON is not saved. In searching the web, this seems to be a fairly common issue. Lots of attempts at workarounds; refreshing the browser, closing/opening the browser, using different browsers, changing security in the browser, etc. The only thing I have ever found is to keep doing it until it “sticks”. It can take many attempts to get the JSON to save and remain. Have you or anyone you know encountered this and found a workaround? Thank you so much.
I’ve noticed this, too. I’ve found that I had to completely remove all of the code and save it multiple times, to sort of “reset” it.
Any possibility that satic images (not just icons from the library) can be used in either of the HEADERor FOOTER?
Ideally I’d LOVE this capability in the BODY, but I’m assuming that’s a no-go given how simple that code is.
I’m not sure. You’re probably right about the difference in complexity of the code.
Hello!
Any hint on how you did the Toggle button for the Approved field?
Thanks in advance!
It’s a yes/no column.
I want to add a print button in header. That will print the current record how Can I do that>
You can’t. For more complex functionality like that, I’d use a Power App. Power Apps have that capability.
Hi Laura,
Can we apply styling to the Body part sections? Like I want to make “Requester Info” as another header with some color.
No.