List formatting for modern list views is an incredibly powerful tool that allows you to quickly and easily add instant meaning, visual appeal, and dynamic visualizations directly to your lists. With some simple column formats, a view format, or maybe even a combination – power users can take advantage of all the power of the modern list view while adding visual semantics that bring contextual meaning and dramatically increases the value for end users.
Awesome! But how do you make sure your formats don’t clash with the rest of the site?
List formatting allows you to specify inline styles for your custom elements including attributes like color, background-color, and more. Using these directly ensures you always get the chosen color. This is great when that’s what you want, but what happens when a user changes the site’s theme or a site is associated with a hub site that provides its own set of colors?
Fortunately, list formatting also allows you to specify classes for your custom elements. In addition to the predefined classes, like the sp-field-severity classes, you can take advantage of many of the Office UI Fabric classes to ensure your colors always match the theme (even custom themes).
Theme Colors
The Office UI Fabric provides 9 theme colors and 11 neutral colors in addition to the 23 named colors. Each of these can be combined with prefixes to apply to an element’s text, border, or background. There are also hover versions of each! This gives you well over 250 classes just for applying colors.
You specify how you want the color applied by using the following naming conventions:
ms-[location]-[color]
ms-[location]-[color]–hover
Here’s a handy table with examples:
| Location | Example |
| Text | ms-fontColor-neutralPrimary |
| Text Hover | ms-fontColor-neutralSecondary–hover |
| Background | ms-bgColor-themePrimary |
| Background Hover | ms-bgColor-themeLight–hover |
| Border | ms-borderColor-tealDark |
| Border Hover | ms-borderColor-magenta |
Keep in mind these only apply colors and that you’ll still need to specify other properties (such as border style/width) via individual style attributes. In these cases, don’t use rollup styles like border since this will override the color. Use the individual border-width, border-left-style, etc. attributes.
Using these classes is also the only way to apply hover styles within List Formatting.
Finally, unlike the other named colors (like ms-bgColor-yellow), white and black are theme sensitive and will swap values when used on light or dark themes.
Typography
Just like with colors, List Formatting lets you specify font sizes and weights using inline styles. However, you can ensure you match the rest of SharePoint by taking advantage of the typography classes provided by the Office UI Fabric.
The 10 base classes (ms-font) allow you to match size and weight together in a single class and represent the recommendations laid out in the Office Design Language. However, there are also 10 size classes (ms-fontSize) that only affect font-size that you can combine with the 4 weight classes (ms-fontWeight) that change the text’s boldness.
Resources
Exploring the Office UI Fabric site will let you know what classes are already available as you design your formats so that you can focus on your customizations while ensuring you match the overall style and colors of your SharePoint site (even as they change).
Additionally, SharePoint Patterns and Practices (PnP) provides several column and view formatting samples to inspire you and help you get started. PnP also provides List Formatter, a free tool that makes creating and updating your formats simpler than ever!
The theme sensitive formats shown in the animation above can all be found here:
- Complete: Yes/No Checkboxes
- Title: Strikethrough on Completion
- Progress Column: Percent Data Bars
- Assigned To: Highlight the Current User
- Due: Overdue Item
- Action: Launch a Flow for the Selected Item
- View: Current User’s Rows
For detailed guidance and reference, be sure to read the official documentation for column formatting and the new view formatting.
About the Author
Chris Kent is a Microsoft Office Development MVP and the Office 365 Practice Lead for DMI. He is a frequent contributor to SharePoint Patterns and Practices (PnP) and a member of the SharePoint PnP Core Team where is especially focused on List Formatting and the SharePoint Framework. He is passionate about mapping technology to real-world solutions.
Chris is a highly-rated speaker and has presented at user groups, SharePoint Saturdays, webinars, and conferences. He posts regularly to his blog, thechriskent.com, tweets the twitters @thechriskent, and works on multiple projects over at GitHub.
SharePoint Team, Microsoft – 4th of October 2018
