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
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
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.
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.
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.
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.