I’ve been giving some talks lately on how Microsoft and some amazing contributors have given us the ability to format our list columns in Modern Lists & Libraries to give your users a great experience.
In these talks, I go through how you can use pre-created open-source JSON constructed objects and how most of the work is already done and all we have to do is copy and paste the JSON for the format we want from the Git repository. It’s as simple as going to your List column –> Column settings –> “Format this column” option and pasting in the JSON that has already been constructed by the contributors. Review this post for more information on how to do this.
Template Editing Wizard
Microsoft has now given the ability to format your columns via a template editing wizard. Basically the wizard allows you to edit the look & feel of certain list column types with some key use cases. In the back-end, it generates and attaches the JSON template to your list column.
For the column types that are supported (so far only choice, date & yes/no) when you go to the Format this column option, each template has:
- A Small Image Preview that give you an example of the format being applied by the template
- The Title of the template
- A small Description of the template
- An Edit Template link that takes you to a screen depicting the basic options you can customize for the template
- An Advanced mode link that lets you update the JSON directly that is generated via the template or your own JSON (like the samples on Github)
- A Checkbox where you get a Preview of the template on your column
Below are the wizard based templates that I have been able to see thus far:
Format Background Color (Column Type: Date)
Fill Background Color (Column Type: Choice)
Fill background color by choice template editor
Fill Background Colors (Column Type: Yes/No)
It seems that the user interface has been well thought out and that there are many more templates to come for each type of column type. In the meantime, you can always check out the open-source list formatting samples on Github.
I love this improvement. One thing I noticed when testing is that the formatting does not carry over to web part views of the same list/list view. This is disappointing! I was really hoping to make more of a statement to the list on the page where I show it as a web part, as well as the list itself. I hope this will change soon.