Skip to main content

Customize list forms in SharePoint with JSON formatters

Back in the days of classic SharePoint we had a few options to customize list forms, such as JSLink. Up until recently our options to customize list forms in modern SharePoint were somewhat limited. Sure, we could use JSON to apply custom formatting to views and columns, but unless we leveraged tools, such as PowerApps or SPFx Application Customizers, it was impossible to style list forms.

Microsoft has recently introduced JSON formatters for list forms and I think they are great, especially for requirements where a simple header or footer change may be required.

In this blog we will cover what JSON formatters are, how we can leverage them and some useful examples to support our understanding.

What are JSON formatters?

When Microsoft introduced the modern version of SharePoint, capabilities like JSLink were no longer compatible and became obsolete. JSLink was useful because it allowed us to customize list views, forms and columns, and for some time there was a void until Microsoft released JSON formatters for views and columns.

JSON formatters is much easier to use than its predecessor JSLink. However it’s not been possible to use it to customize SharePoint list forms until now.

How can we leverage them?

In addition to list views and columns, JSON formatting can be applied to the header, body and footer of a SharePoint list form.

To apply the formatting, we first need to create and configure a SharePoint list. I have used the “Travel requests” list template.

Once the list is created, add an item within it.

Click on the newly created item and then select the “Edit form” icon followed by “Configure layout”.

Here we see the three target areas for customization; Header, Body and Footer.

Header examples

The example below simply creates a blank header by rendering an empty div element.

The next example illustrates how we can apply inline styles and Fluent UI CSS classes to customize the aesthetics of the header.

This example shows how we can create parent/child HTML elements and apply conditions based on SharePoint list values.

Body examples

An improvement in structure can be applied to list forms by splitting the fields into a group of sections.

This example shows how we have split the standard “Travel request” list form into four logical sections: “Trip Overview”, “Trip Justification”, “Arrangements and Costs” and “Approval”. 

Note: unlike the Header and Footer, we target the list columns by their display name.

Footer examples

Applying customizations to the footer works in the same way as the header. Here is a simple example.


There will be times when we still need to use SPFx or PowerApps to customize list forms in SharePoint, but with JSON formatters we now have an additional tool in our armour and I hope this post gives you an idea of what is possible.

Useful resources


  1. 1xbet Casino » $1000 welcome bonus + 100 free spins » VIP
    1xbet Casino offers 카지노사이트 the best odds and the best bonuses at the leading online casino. Sign up 샌즈카지노 and start playing 1xbet at 1xbet Casino today! Rating: 4.3 · ‎Review by


Post a Comment

Popular posts from this blog

Replace Power Automate Approval Emails with Adaptive Cards in Microsoft Teams

Microsoft recently released a personal app for Approvals within Teams. Please review this before investing time implementing something customized. If you are still interested in creating a custom adaptive card for an approval process check out the following blog for which this blog is a good precursor. With Microsoft Teams becoming an increasingly dominant force in collaboration, and one objective being the reduction of email, this blog covers how you can simply replace approval email notifications with dynamic adaptive cards in Teams. So, how does it work? I have created a sample SharePoint list using the “ Travel requests ” template and associated it with my Team as shown below. Within Microsoft Power Automate I have created an “ Automated cloud flow ” using the “ When an item is created ” trigger. The next step is to add the “ Create an approval ” action. I have personally configured this action as follows. Notice how I have set the “ Enable notifications ” to “ No ”. This wil

Using Microsoft Graph Open Extensions with PowerApps

This blog will cover how to create a lightweight application that will Create, Read, Update and Delete user profile data in Microsoft Graph by extending the “user” resource. Firstly, let us cover what exactly Graph Extensions are. Graph Extensions allow us to extend several graph resources, such as “user” and “message”, to capture additional data that we may need for our own application, without having to rely on an external data source. One benefit of using Graph Extensions over methods such as local storage is the roaming capability. Also, because the application properties are stored in the Graph, they can be leveraged across the whole Microsoft 365 platform. Because I am an aviation geek we will use “favorite aircraft” as an example scenario. Here is the high-level objective. A user can create, read, update and delete a property named “plane” The selection is saved as an extended property in the Microsoft Graph. Getting started Because we are interacting with the Mi