Finally, SharePoint Received Form Formatting

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.

 

   

 

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
  

  {
      "debugMode": true,
      "elmType": "div",
      "txtContent": "New Employee Onboarding",
      "style": {
          "height": "40px",
          "font-size": "18px",
          "font-weight": "600",
          "padding": "10px",
          "color": "#fff",
          "background-color": "#383794"
      }
  }

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",
    "txtContent": "© Ktskumar Portal",
    "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.