Finally, SharePoint Received Form Formatting

Shantha Kumar T

SharePointSharePoint Form Formatting

8 Comments

Join the conversation! Your thoughts help the community grow.

Ricardo Carneiro4y ago
Hello Kumar, is it possible to better format the BODY, I mean, on the SECTIONS Name, like Employee Name and Details in your example, insert a background color to highlight the TITLE of the Section.
- Shantha Kumar T4y ago
  Hi Ricardo, Applying the styles to sections are not supported yet. We will wait for some time to get this feature in SharePoint in future.
Bille Wo5y ago
Hi, Kumar, thank you for your sharing. very nice! Is it possible to apply style to body section?
Steve Babco5y ago
Hello, great info thank you. I'm having issues showing the list comments option with applying the above. Any idea how I may work around this? Thank you
Kapil Patil5y ago
Hello Kumar, I am facing an issue while using this feature. I tried to customize body of my sharepoint list however maybe I added wrong code and due to which now its not showing anything on form window. If I click on configure form option to remove the wrong code, it does not lead me to editor window and so I am stuck with a blank form window. Do you know how to get past this issue ? I will be very thankful if you could help me here.
Colin Steger5y ago
Have you found a way to hide the Attachments field? I disabled Attachments in Advanced settings but, it still shows up in the customized edit form. I tried adding it in hopes that I could set it to false in Edit Columns but, it doesn't show up in the list of columns. I'm thinking it's a bug.
Ruth Jennaway5y ago
Thank you very much for sharing this - really nicely explained, and I quite agree - they need to give us more formatting options for the body area, including being able to say how many columns and to resize the multiline text box :-)
Tarun D5y ago
Thanks for sharing. Very interesting and useful feature.

Customizing the SharePoint List Form is one of the core areas most of businesses and developers investigated when we checked the SharePoint history.

In earlier versions of SharePoint Online, we didn’t have an OOTB option to customize the SharePoint Lists and Forms. When Microsoft brings the modern look and feel to SharePoint Online, they begin to provide the updates frequently.

With that update, SharePoint Online receives

Column Formatting (a JSON format to apply on each Column to change the look and feel on the List View)
View Formatting (a JSON to apply on the List view to change the look on feel on each row item)

Finally, Microsoft brought the most awaited feature called Form Formatting (Even though it is not a fully customizable – we can expect more updates on this in coming days) this is a very fantastic feature to the SharePoint List Forms.

In earlier days, Microsoft recommend us to use InfoPath, then PowerApps. Now most of the SharePoint Forms are running on PowerApps. For simple customizations also, we require a PowerApps, but this is going to change after the update on Forms Configuration.

Ok, what we can do with this?

SharePoint Online provides three configuration options to customize the forms. They are,

Header
Footer
Body

Header – helps to insert header section to the Form

Footer – helps to insert footer section to the Form

Body – helps to add the one or more sections and decide the columns on each section. Not allowed to format the section and columns (we can expect these features in coming days).

We will transform the Form which from 1^st image to 2^nd image by using JSON Form Configurations.

Finally, SharePoint received Form Formatting!

Header

Follow the below steps to customize the header section in SharePoint List Form,

Click New in SharePoint List to open a new form
Click Edit Form icon button and select Configure Layout to open a Format panel
Select the Header from the dropdown Apply Formatting to
Enter the below code in the JSON format box to insert the header section
1. {
2. "debugMode": true,
3. "elmType": "div",
4. "txtContent": "New Employee Onboarding",
5. "style": {
6. "height": "40px",
7. "font-size": "18px",
8. "font-weight": "600",
9. "padding": "10px",
10. "color": "#fff",
11. "background-color": "#383794"
12. }
13. }

Then click Preview button to see the changes. Or click Save button to apply the configuration to the form.

Body

Follow the below steps to organize the columns in Body section.

In the Format Panel, select the Body from the dropdown Apply Formatting to

{
"sections": [
{
"displayname": "Employee Name",
"fields": [
"First Name",
"Last Name"
]
},
{
"displayname": "Details",
"fields": [
"Address",
"Phone",
"E-Mail"
]
},
{
"displayname": "Referrence",
"fields": [
"is Referred",
"Referred By",
"Attachments"
]
}
]
}

For now, we can only provide sections and field names in Body section. This helps to split the form in to sections and organize the column in section. If we are not specified any fields, those missed fields gets automatically organize in the last section.

Footer

Follow the below steps to inject the element and apply styles to the end of the form,

In the Format Panel, select the Footer from the dropdown Apply Formatting to

{
"debugMode": true,
"elmType": "div",
"style": {
"height": "10px",
"color": "#fff",
"font-size": "12px",
"border-top": "5px solid #eee",
"background-color": "#383794",
"padding": "10px"
}
}

Control Field Visibility in Forms

Form configurations is also used to show / hide the fields based on the conditional formula.

This feature allows us to use the Conditional Formatting on each field to show / hide based on other column values.

Follow the below steps to show / hide and apply the conditions,

Click New in SharePoint List to open a new form
Click Edit Form icon button and Edit Columns to open the Edit Column panel
Select checkbox to show the columns in the added section
Unselect checkbox to hide the column in the section
Click the ellipses and Select Edit Conditional Formula to open the Formula panel
Enter the formula in the panel and click Save to apply the formula.

Before applying the formula

After applying the formula

If Referred is selected, the Referred By column is visible in the form. Otherwise Referred By column is not shown in the form.

There are some disadvantages to the Form Configuration like

Form looks wider in the page
CSS and styles are unable to apply to the Body section

We hope to get updates to get these features. Other than that, this is a very expected feature to customize the entire Form. Now, we don't need to use PowerApps for simple customizations.