How to customise the layout of your Microsoft 365 lists and forms without code

With Microsoft Lists and SharePoint's list formatting and configuration options we can customise the way columns, views, and add/edit forms are displayed without the need for custom code.

A SharePoint, Teams or Microsoft Lists is a collection of information that can be shared with people. This information consists of a set of elements with metadata. Each of these metadata or properties is stored in a column.

When a list is created, it has at least one associated view and forms for creating and modifying the items it contains. Views are ways of presenting the list information in the browser and are customisable. For example, you can filter items by date of creation or modify the columns displayed, either to enlarge or reduce the information.

Although the basic configuration of the lists allows customisation of views and forms, it is very common to develop custom code to suit clients' needs, both in terms of design and functionality. However, this is not always necessary. Knowing all the possibilities can save development time and make it easier for users to maintain.

• Some customisations can be applied through column configuration options.
• Others, where the presentation depends on the value of another column, are implemented through the use of conditional formulas.
• Finally, other formats are implemented by constructing JSON objects that replace the default display.

It is this last point, a new feature of 365, whereby, following a defined structure, you can describe the HTML elements that are displayed when a field is included in a list view or a form and the styles that are applied to those elements.

Views are ways of presenting list information in the browser and are customizable

It is important to note that the formatting applied does not change the data, only how it is displayed.

Preparation of the example

To test this, go to Microsoft Lists and create a list with the template "Problem Tracking". We add these new columns:

1. Comments, of the type "Several lines of text". It will contain annotations on the task.
2. Solution, of type "Several lines of text". We want to make it mandatory to add a comment when the problem is solved.
3. Display, choice type.
4. Correction date of type "Date". We will make the internal name "CorrectionDate" by first creating it with this name and then modifying the name to "CorrectionDate".

​​​​​​Rearrange, show and hide columns

To arrange the information in a way that makes it easier to read and edit, it is sometimes necessary to adjust the order of the columns in the view or in the form. The steps for this sort order are as follows:

In the forms

1. Open the form by clicking on "New".

2. Select the column editing menu.

3. Drag the columns in the order you want to see them,

4. Mark or unmark the columns you want to be displayed. Note that if a column is mandatory, it cannot be unchecked.

In the views

In the views, these changes can be made via the context menu of the column. To change the order, it is also possible to drag the columns to the desired position. 

​​​​​​Showing and hiding columns based on the content of other columns

In our example, when a problem is solved, we want to have more information about the solution. We will make the solution visible only when the status of the problem is "Completed". The correction date will also only be displayed when the status is "Completed".

For this we must use the conditional formulas and follow the steps below:

1. Open the form by clicking on "New".
2. Select the column editing menu.
3. In the context menu of the Solution column, click on "Edit conditional formula".
4. We include the formula =if([$Status] == 'Completed', 'true', 'false'). Remember that the column names in the formulas must be the internal names, which must be preceded by "$" and enclosed in square brackets. In the example, the internal name of the "Status" column is "Status".
5. We include the same formula in the correction date column.

You can see examples of conditional formulas according to field types here.

Modification of the form

By configuring the form we can describe how the header, footer and body structure will look like. In this case we have to apply the format using JSON objects.

In our sample list, there are fields related to the description of the problem, fields that expand on the information, and fields that allow us to follow up. With this in mind, it would be useful to group the fields into these sections that organise the fields. In addition, we will also modify the header to customise it with a new title and icon.

You can find all the necessary information about the structure of JSON objects and examples to start from here.

Headline

This time, from the menu shown in the "New" form, we will select the option "Configure design" and first of all we will configure the header.

We copy the JSON from the header section of the Microsoft page. Observe in the following image how, with a predefined structure, the HTML that will contain the header is being built. In this case, an icon and text with customised styles.

• For icons, we can include any of those provided by FluentUI (https://developer.microsoft.com/en-us/fluentui#/styles/web/icons​​​​​​). In our case, since this is a problem tracking list, we will use "WorkItemBug".
• The text shall contain the word "Problem" and the title of the element. Notice that as the title changes, the heading changes as well. Any column of the element preceded by "$" and enclosed in square brackets can be used.

This is the difference between the default header and our modification:

Body

In the form design configuration, we choose the value "Text" from the drop-down menu. Remember, our aim this time is to make it easier to fill in, by grouping the information in the following categories:

• Basic facts of the problem.
• Monitoring data.
• Further information.

We copy the JSON from the "Configure a custom body with one or more sections" section of the Microsoft page and modify it to suit our example:

• Each section can have a title.
• In "fields" we have to include the "display names" of all the columns to be included in the section.
• We include an empty section that will contain other visible fields that have not been included in the other sections.

​​​​​​This is how our modified form looks like, which also has a responsive design.

Remember that the columns "Solution" and "Correction date" will be displayed when the status is "Completed".

If we repeat the steps of the column organisation, you will see that the sections are now also included:

Many more examples of list formats are available on the PnP website: https://pnp.github.io/List-Formatting/formsamples/

Validation

Finally, we will validate that the data entered meet the following requirements:

• The date of the notification may not be later than the day of.
• The date of correction is equal to or greater than the date of notification.

We can include validations of the values of a column or of several columns of the form through the use of conditional formulas, which can be applied either to the validation of a column or to the whole form.

It is important to note that only list-level validation can be included, so the error message must be clear and include details of all validated data.

On our form

1. In the view, select "Edit" in the column "Notification date".
2. In "Column validation" we will include the formula "=DateReported<TODAY()". The error message will be "The notification date cannot be greater than the current day".
3. In the list settings> Validation settings, we include the formula "=[Date of correction]>=[Date of notification]" and the message "The date of correction must be equal to or greater than the date of notification. The date of notification cannot be later than the current day".

Once configured, when creating a new item with incorrect dates, validation messages will be displayed:

​​​​​Modifying a view

As with forms, we can format a list view using the settings. In case not all cases are covered, we have the option to modify the associated JSON.

We can apply formatting to:

• Columns.
• Views. In this case, there are two types of design:
  • List layout: items are displayed as in a table.
  • Gallery layout: items are displayed in boxes.

In our example, we are going to make these modifications from the "Format current view" option:

1.    Modify the "Status" column according to its value with colours and icons.

• Accesses the modification of the format of the current view.
• Click on "Apply formatting to columns".
• Choose the "Status" column and under "Background colours" edit the styles:

2. Mark in red the whole item if the priority is "Critical" and it has been pending solution for more than 5 days:

• Accesses the modification of the format of the current view.
• Click on "manage rules" in the "Conditional Formatting".
• Create the following rule:

With the options we have, we can't set the notification date to be less than Today minus a number of days, so in this case, we have to modify the JSON associated with the format.

• Click on "Advanced mode" and modify the JSON to subtract 5 days from the notification date.

The view will now look like this:

Knowing the configuration possibilities of lists allows you to make the most of them to facilitate access to information and make it more attractive. It may, in many cases, avoid the use of code and make it maintainable by users.