The SharePoint List Facelift

April Dunnam

0 comments

This ebook contains practical examples showing how to use List formatting in new Modern SharePoint to improve the styles used in your SharePoint Lists. It gives an introduction to Point and Click formatting and also explains how to take this further to use existing JSON formatting styles that you can simply apply to your data.

If your SharePoint lists are getting a little old, out of date or generally tired, then why not rejuvenate them and give them a new lease of life? There is no need to re-invent the wheel, with a few nips, tucks and minor adjustments here and there you can transform them back to their former glory.

To give your SharePoint list a Facelift, we’re going to specifically look at point and click formatting options, column, and view formatting.

Classic v’s Modern List Views

Before we start, let’s review the differences between the old ‘classic’ view and the new ‘modern’ look before we talk about the evolution of SharePoint lists. SharePoint lists on their own have come a long way as we can see from these screenshots below. We have a task list shown in both the old classic view and also in the new modern view.

So what has changed?

Modern SharePoint lists alone, even without the formatting can give us a lot of new capabilities.

Instead of the old school fixed layout of the classic list, with modern lists, we get nice responsive lists out of the box. We say goodbye to InfoPath and SharePoint Designer and create robust lists, forms, and workflows with Flow and Power Apps.

View styles are a thing of the past, and that is where List formatting comes in which is a way to replace all of those view styles that you might have used in classic SharePoint list, but you can do so much more with List formatting which is what we will look at later. JS link was also removed with this functionality offered by SPFx Field Customizers.

What is List Formatting?

List Formatting is a modern approach to list customization using JSON and is a way to add meaningful and appealing visuals to your SharePoint lists, all done with a simple JSON schema.

As an example in the screenshot below, you can see a task list with some row items highlighted in red and due dates in red text if the items are overdue.

Before we dive into the details of how to do this, let’s look at who can do it and how it is achieved.

Who and How?

Anyone who has permission to create views can apply this type of formatting – this means people with ‘Full Control’ like Site Collection Admins. You can also use the formatting to create personal views if you have Contribute Access.

The important thing to note about this list formatting is that it does not change your data. All it does is apply a shell on top of the data that changes how it is displayed. The data is intact; it will not change.

List formatting is a subset of 2 different things.

  • Column formatting which applies directly to list fields or site columns and is stored in the data field itself and
  • View formatting a superset of column formatting applied to an entire view and is stored in the view

An example of column formatting:

In this example, you can see that I have highlighted the Due dates that are overdue in red and formatted the effort days into a block the size of which represents the number of days involved, so you get a visual picture of the effort required.

An example of View formatting:

In this example, we’ve taken the formatting up a notch and applied it to the entire row of information in the list, so it no longer looks like a SharePoint list.

Most column types can be formatted with both Column and View formatting. There are only a few types that cannot be formatted (namely managed metadata, retention label and filenames in document libraries)

The beauty of SharePoint list formatting is there is a rich repository of samples for you to choose from. There are at least 50, and these formats have instructions and screenshots so you can literally copy a JSON block from GitHub and paste it directly into your SharePoint list and be good to go.

Where to start?

GitHub contains many formatting samples; you can find them by using bit.ly/LF-samples to go directly to them (or search for SharePoint list format in GitHub, and it should take you right there). There’s a really rich and helpful community of people that are actively adding new samples to this. It’s a great resource for you to get started with SharePoint list formatting and we’ll reference some of them from GitHub during the demos later on.

Column Formatting

So now that we have a good idea of what SharePoint lists formatting is let’s dive into column formatting a little bit more.

Before we dive into the whole JSON piece and create formatting from scratch or modify existing formatting. Let’s review the ‘point and click’ available formatting options that you can use without having to worry about any JSON whatsoever. ‘Point and click functionality is fairly new and available for certain field types in your SharePoint list which allows you to apply the specific format style to your data.

In the screenshot above, showing format date and time columns, choice columns, and yes, no columns in your SharePoint list, you should see these helpful ‘points and click’ formatting options for those field types. It’s important to note that these will also work for calculated columns that you have set as a date or yes, no as well.

The main choices with these ‘point and click’ formatting options is to fill in a background color based on the data of your date, time choice or yes, no columns.

So it’ll look something like this.

If you click on one of your date time columns and select fill background, you can click Edit Template, and it gives you this nice interface here where you can define the options and what colors you want to show.

So for example, in your date and time field, you can say, if the DateTime is before today, then show color 1, if it’s today, show color 2 and if it’s after today, show color 3, you can choose any of those color options through the interface without any JSON needed.

The color pickers use the Office 365 theme that you have applied. So it’s selecting the colors from whatever theme that you’re using in your SharePoint site. So if you use a dark theme, the picker would show you different colors from which to choose.

Point and Click formatting

In the SharePoint site task list below you will see a due date field, which is a date-time field and a status field, which is a choice field that has different statuses from which you can pick the correct option.

To use the point and click formatting, click the dropdown arrow next to your field name and you’ll see a column settings option, followed by an option for formatting this column.

Note: this only works with modern SharePoint. You won’t see these options if you are in classic mode with your SharePoint list

Click “Format this column,” and you will see the formatting option that we looked at earlier.

Now if you click the checkmark here, it will automatically apply some formatting. It will use a standard template with a basic color scheme. If you are happy with that color scheme, then click save. That is how easy it is to use this formatting.

In this case, the default formatting doesn’t make sense because I want red to be used if the item is overdue. To change the colors used, go back to the Format Due Date Column and select ‘Edit template’ to customize this further.

Click on the little color palette icon on the right side and select the color you want to use instead. So in this case, if the due day is before today, choose red because that means it is overdue and it needs attention. For items due today choose yellow and for items due in the future, choose green.

The different options for each color use different levels of transparency; the lighter one is the most transparent on the left, and the least transparent or darker color is on the right. Whatever color scheme you choose, it’s a good idea to match the transparency levels between your colors so that it’s consistent. Remember to click Save when you’re happy with your choices and close the window down.

Follow the same process with the status field because this works with choice columns as well. So if we click the status dropdown, select column settings followed by format this column, the same fill background option will appear. If you’re happy with the default formats, click save. Otherwise, we can click ‘Edit template’ again and modify this to our needs.

In the above screenshot, red reflects a delayed status, green for completed, yellow for in progress and grey for not started. Remember to click Save, and your color choices will be automatically applied.

The formats chosen will stay consistent and work no matter what happens to the original list. If the list is sorted or filtered in any way, the format colors will still be applied appropriately.

Advanced Mode

Advanced mode provides access to the JSON code in the backend used to create the basic formatting which you can then tweak to produce the formatting effect you want. To find the advanced mode, go back to the due date, select column settings, format this column, edit the template and you will see the advanced mode option at the bottom.

You can then amend the JSON code as required – we’ll cover more on this later.

By selecting ‘switch to design mode,’ you can go back to the nice easy to use interface.

If you decide that you don’t want this formatting anymore, go back to the column, column settings, format this column and uncheck the formatting box and click save.

The formatting will be removed, you can reapply it later if wished.

Another thing that’s great about column formatting is that it applies to every single view of your list. If you click the view dropdown and change to a different view, to filter out some of the items, for example, the column formatting is still applied. This is a nice and easy way to start using SharePoint list formatting.

Introduction to JSON Formatting

The point and click formatting options are a great, easy way to get started, but you can only go so far with them. If you want to reflect a slightly more complicated setting, for example, do not highlight any overdue due dates in red with a completed status, then you need to edit the JSON to be able to add that condition.

To give you a basic understanding of Jason so that you know where to go and what to change, we’re going to do a quick JSON syntax crash course. This has been taken from Chris Kent’s list formatting talk at the SharePoint conference.

JSON stands for JavaScript Object Notation, key points are:

  • An object is a set of name-value pairs, in the example above, we have the first name-value pair with a name of ”elementType” and value of “div”.
  • Objects should be wrapped with curly brackets at the beginning and end { }.
  • Each name is wrapped in “quotes” and followed by a colon and the value for that name.
  • A comma separates each individual name-value pair. So, in the example above, “elementType”: “div” is one name-value pair, followed by the next name-value pair “debugMode”: “False”.

Going a step further, you can have an array of JSON objects. An array is an ordered collection of values wrapped by square straight brackets [].

In the previous example I have:

  • an array called “children”
  • within the array there is a list of objects (delimited by {}) each separated by a comma.

To format a SharePoint list you always need to define a schema and tell it how to display each element on that list. In the example above each element will be displayed by a parent div and two child spans side by side (see image below); the first span displays a warning triangle on the left followed by the second span that displays the value of the field on the right. The display of each span is also formatted by a “padding-left” with the value of “4px”.

Microsoft UI Fabric

As you start working with SharePoint list formatting heavily, you’re going to want some help for defining specific styles and using icons. Thankfully there’s the Office UI fabric for that. If you go to developer.microsoft.com/fabric that’ll take you to the Office UI fabric page. From here, click on styles to see the different available options.

Colors

So here in colors, if you select the theme slots, this is helpful for SharePoint list formatting when you want to utilize some colors from your Office 365 theme. So these theme slots are basically like CSS placeholders that take into account whatever theme you have applied, and they associate different colors based on that theme.

So scroll down on the documentation here, and you’ll see this color palette selection for your Office 365 themes. They’re broken out into different sections, with theme colors first,

a nice selection of neutral colors to choose from, so grays and blacks,

And a variety of accent colors

You can go through all these options within your theme and get nice corresponding colors to utilize in your formatting.

Iconography

Another big use case for the office UI fabric with SharePoint list formatting is the iconography. So from the UI Fabric Styles page, if you select iconography, scroll down just a little bit you will see all of these icons you can choose from, and reference in your list formatting.

If you hover over an icon, like the microphone, for example, that microphone text is the name of the icon that you’ll use in your SharePoint list formatting.

If you’re looking for something specific, you can search the icons, for example, to find an icon that reflects a picture so that you can view the available icons.

Custom Formatting

Let’s take a look at how we can go beyond the point and click formatting options and apply some custom formatting to our columns. The easiest way to get started is to use the rich repository of list formatting samples on GitHub. So if you just searched for SharePoint list format and GitHub, that should take you here.

Custom formatting is broken out into two different sections, so you’ll see a folder here for column samples in one for view samples.

Column Samples

Select the column-samples folder, and you’ll see all of the different column formatting samples that have been submitted and are available for you to use.

Back in the original task list, it would be nice to show a picture of the person to who a task has been assigned, rather than this information only to appear when you hover over the field.

Scrolling through the column-samples folder shows lots of different options.

Click on the option you are interested in to review the documentation and description.

Click on the JSON file to review the details.

Then click ‘raw’ in order to copy the code.

This displays the code so you can copy it.

Return to the original task list and click the drop-down arrow for the assigned to field, select column settings and format this column.

The AssignedTo field does not have any ‘point and click’ formatting options, so instead, you get an empty text box into which you can ‘control V’ to paste in your column formatting JSON copied from GitHub and click save.

Tip: If you want to see what this looks like without actually applying it to your list, click the preview button first. Rather than showing the person’s name, it’s going to show their profile image, and if you hover the picture, it shows a tooltip of that person’s name.

SharePoint list formatting doesn’t have to be too difficult, with just a few clicks for point and click options, or copying some JSON code from the GitHub repository you can quickly style a nice, visually appealing list out of the box.

Now that we’re pretty familiar with column formatting, let’s look at that other superset of column formatting called view formatting.

View Formatting

View formatting expands on column formatting and allows you to transform the entire row of data in your SharePoint list.

The picture below gives an example of what can be achieved using View Formatting. The task list used earlier has been reformatted into a task card display, similar to what you would see in Microsoft planner. This has been achieved by using SharePoint view formatting on the entire view, so it looks nothing like an out of the box SharePoint list each item in the list has been broken out into an individual card.

The JSON code for this is a sample that April created and submitted to the SharePoint list Format in GitHub. So the code for this is already available, you can copy and paste it into your SharePoint task list in the same way we used the Formatting of the AssignedTo column in the previous example.

When it comes to viewing formatting specifically, there are two different ways that you can approach it, Row class and Row Format.

Row Class

You can use the additionalRowClass element to apply a particular class to an entire row which can be conditionally applied. For example, if you want to highlight an entire row if the due date is overdue (instead of just the particular column as in the earlier example), you can do that with the additionalRowClass.

Row Format

If you want something more radical, like displaying a task list in a card display (as above), then you need to use the row format or option in view formatting to achieve it. That allows you to completely transform the rendering of the row in the SharePoint list.

View Formatting Syntax

There are four main elements that you need to be aware of when writing view formats or customizing view formatting.

hideColumnHeader

“hideColumnHeader” is a property that you can set to true or false. When true, it will hide all of the different headers in your column.

In the example above, if “hideColumnHeader” is true, the “Title,” “Due Date,” “Effort(Days),” and “AssignedTo” headers will not be visible. If set to false, then they will show.

hideSelection

“hideSelection” is another true or false property that you can set. When false, users can select rows by clicking the checkbox to the left of each row as shown.

When “hideSelection” is true, the checkboxes cannot be used. The “hideSelection” property enables or disables this option.

additionalRowClass

AdditionalRowClass can apply to the whole row and you can use expressions. So for example, if “Due Date” is less than today, then show this class else show something else. The additionalRowClass stuff is only applied if you don’t have a “rowFormatter” specified.

rowFormatter

You should use “rowFormatter” when you want to transform the format of your list completely. Similar to the Kanban task example that we just reviewed.

Element Types

When using view formatting, you’ll probably want to define some element types by using the “elmType” property. This element type is the only required property to use in your view formatting, and there are six different types of elements that are acceptable.

  • div
  • span
  • an “a” tag, which is a hyperlink,
  • image,
  • button,
  • and an SVG. (scalable vector graphic – effectively just a fancy picture).

You can use a combination of these different types of HTML elements to transform your list completely.

View formatting demos.

We previously looked at the differences between classic and modern SharePoint list and that the list view styles are no longer available in modern SharePoint. Now they’re technically there, but if you’ve ever tried to apply them to your modern list, you’ll notice that they don’t do anything.

With a classic SharePoint list, you can modify the view in several different ways. One of the most commonly used styles is “Shaded,” if you go to modify view and scroll down to the very bottom, you will see the available style options.

The shaded view effectively shades every other row in your list by highlighting it in grey, to help break up very large lists to make viewing it easier on the eyes. It’s a commonly used list style in classic SharePoint; however, it cannot be used in the modern view.

SharePoint view formatting in the modern view can achieve the same effect.

GitHub – a great resource

Before you try to write the JSON yourself, it’s a good idea always to check the SharePoint list formatting GitHub repository first to see if it already exists. In GitHub, select the view-samples folder.

The “alternating-rowclass” sounds like it may do the trick.

Look at the “read me” section for a description of what that formatting style will do.

It looks like it highlights every other row and uses theme colors so it will provide the effect we want. Additional notes are included in the GitHub entry to provide lots more useful information about how it works.

To use this in our modern SharePoint list, scroll back to the top and find the JSON file and select it.

Highlight the code and copy it to your clipboard and go back to the modern SharePoint list.

View formatting is stored in the view itself, so to apply this style, select the view dropdown for the list, and then select “Format current view”.

Then we’ll get a pop-up box similar to when we were doing the column formatting.

Then paste the JSON code in.

You can use the preview option to make sure it’s working correctly and then click Save.

Alternative rows are highlighted in blue to match our current theme, and it’s highlighting every other row.

Formatting rows in this way only applies to this view. If you create a new view or change to a different view, this style will go away. You need to apply this alternating class view formatting to every view where you want it to apply.

This has shown how you can use SharePoint view formatting to replace your old school classic view styles. Now let’s see how we can take this concept to the next level.

Building a birthday and anniversary web part

A common request is for the homepage web part is an announcement for employees birthdays or work anniversaries, similar to this.

Did you know that we can achieve this with SharePoint view formatting?

You need to create a birthday list within SharePoint containing employee name, job title, email, birthday and a picture then use a calculated column to extract the month name and day from the birthday.

To calculate the BirthMonthDay field, use a concatenate function to get the birthday field and format it as the month, then add the day, as shown below.

A special view has been created to apply the birthday formatting and completely transform the style as shown below.

Each picture is formatted with a nice round image; it includes the person’s name, job title, with other conditional items also used. If the current date is their birthday, a Happy Birthday message and a little cake picture are shown above the date of their birthday. If it’s not their birthday, then the text “Next Birthday” is shown. Out of the box view options are used to filter this particular view to only show birthdays that are greater than or equal to today and sort it ascending to descending.

It’s also possible to include some interactivity with the view formatting. The mail icon in the bottom corner of each box is clickable.

If selected it will open up a new message in Outlook, pass in that selected user’s email address and pre-populate a subject of “Happy Birthday!” so you can send that employee a personalized happy birthday message.

The JSON needed to achieve this is available in GitHub. Go to view samples, and select birthday format.

You can copy the JSON code and apply it to your data as described earlier.

The Birthday formatting is a great addition to the SharePoint list, but you can also make it appear on your homepage by editing the page.

Then click the “plus” Add a new web part.

Search here for “list”.

Then select the birthday list on our page.

To bring in the default view. To change the view, go to the pencil to edit the properties for this web part.

Change the view to formatted.

Toggle the “Hide command bar” option to select “hide” which will mean the list headings are not displayed and the item will look like a truly native web part.

Click “apply” and publish the page. You would never know by looking at it that that is SharePoint view formatting and not a SharePoint framework or custom web part!

Customizing an Out of the Box Sample

So far, we’ve looked at using out of the box samples; however, sometimes you may need to customize one of these samples to meet your needs. To do this, you will need to look at raw mode to see the code to find the bits you want to adjust.

Within the JSON code above for the Birthday format, the hide selection property is set to true, which means you can’t select individual items. Hide list header set to true so that the headers for the particular items are not shown.

Below that, the row format properties are used to customize the look and feel of the particular item in your list. These properties are contained within a “div” element type from there we’re applying the style required. It’s just CSS that is defined in the view formatting. The attributes property is where the background color class is defined; in this case, the themeLighterAlt from the office UI fabric.

Before making any changes to the JSON, it’s best to utilize a text editor like visual studio code so that you can easily find out what you need to replace. First, copy and paste the sample code into Visual Studio and then change the color to “themeLight”.

Initially a very simple change, but in theory, it should work.

Tip: When amending SharePoint list formatting, it’s really helpful to use a JSON validator, like JSONLint. If you go to JSONLint.com, you can paste in any JSON block that you have here, and it will validate that JSON for you.

Copy the JSON and paste it into JSONLint then click the validate JSON button.

If it passes, you’ll get a nice “valid JSON” message. So you know that there should be no issues with this and it should work just fine in your SharePoint formatting.

When you know your JSON is valid, go back to the list and apply that view formatting, Go to all items, format, current view, paste then preview it. You should see the tiles displayed in a darker color.

JSON can be very finicky; one missing comma, for example, can make everything break. If your JSON code includes an error, if you try to validate it an error message will be shown.

It won’t give you any clues as to what exactly is wrong, or how to fix it, only a message stating that that something is wrong. That’s why the JSONLint tool, or something similar, is very valuable when doing list formatting. It’s the only way that you’re going to know exactly what is wrong with your JSON.

One of the great things about view formatting is that you hardly ever need to start from scratch. There is often a sample code that will get you close to what you are looking for, which you can tweak to get the style exactly how you want.

For example, the birthday list format effectively creates a box that displays text and a picture. The same concept with a few tweaks is shown below as a Twitter-Esque type view of items. Specifically, it uses Flow to pull in tweets using a certain hashtag into a SharePoint list, which is then displayed using view formatting to make this look similar to Twitter.

So you have the users picture, name, username, date of the tweets, a retweet type looking button to show the number of retweets and a share icon that will go and open up that user tweet.

This ebook just starts to scratch the surface of the different options available to you for SharePoint list formatting. There are many more samples available in GitHub so give some of them a try and if you create samples why not consider contributing them to GitHub so that others can take advantage of those as well.

0000-00-00 00:00:00


Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}