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.
