SharePoint Online Modern List View Formatting

Introduction

In the previous article, we looked at Column Formatting. In this article, we explore SharePoint online modern list view formatting in the modern experience. We will improve the display of views in SharePoint Lists & Libraries with formatting. Microsoft has introduced some amazing features which give us the ability to format our rows in Modern Lists & Libraries and to provide a great user experience to users when viewing lists.

Scenario

The customer requirement is to display Flight information via list data, shown in tile view. When they click any selected option, the page URL opens in a new tab.

Steps

First, create one custom view. In the view, we construct a JSON object that describes the elements displayed when a field is included in a list view and the styles to be applied to the row item.

The format expects the following fields in the Flight information display List:

Field	Type
Title	A single line of text
Icon	A single line of text (Get the icon name from UI fabric site, see the References URL)
URL	Hyperlink
NewTab	Yes/No - This field is used to open the link the same tab or new tab

Follow the below steps:

Format JSON as per our requirements in JSON Editor
1. {
2. "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
3. "hideSelection": true,
4. "hideColumnHeader": true,
5. "rowFormatter": {
6. "elmType": "a",
7. "attributes": {
8. "class": "ms-borderColor-neutralLight",
9. "href": "[$URL]",
10. "target": "=if([$NewTab] == true, '_blank', '')"
11. },
12. "style": {
13. "float": "left",
14. "text-decoration": "none"
15. },
16. "children": [
17. {
18. "elmType": "div",
19. "attributes": {
20. "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
21. },
22. "style": {
23. "display": "flex",
24. "flex-wrap": "wrap",
25. "flex-direction": "column",
26. "align-items": "stretch",
27. "padding": "13px",
28. "margin": "20px",
29. "max-width": "957px",
30. "box-shadow": "2px 2px 4px #a80000"
31. },
32. "children": [
33. {
34. "elmType": "div",
35. "style": {
36. "text-align": "center",
37. "margin": "auto"
38. },
39. "children": [
40. {
41. "elmType": "div",
42. "style":{
43. "font-size": "13px",
44. "font-weight": "600",
45. "color": "#04474a",
46. "padding-bottom": "8px",
47. "font-family":"Arial"
48. },
49. "txtContent": "[$Title]"
50. },
51. {
52. "elmType": "div",
53. "attributes": {
54. "iconName": "[$Icon]",
55. "class": "ms-fontSize-su",
56. "style":{
57. "color": "#04474a"
58. }
59. }
60. }
61. ]
62. }
63. ]
64. }
65. ]
66. }
67. }

It’s as simple as opening the Flight Information Display list to open the view formatting pane. Then, open the view dropdown View Selector –> “Format current view” option. Follow the numerical points, as shown in the below screenshot:

After Click Format current view below screen appear then pasting in the JSON that has already been constructed above->click save button

Before formatting style of view

SharePoint Online Modern List View Formatting

After formatting style of view

Note

References: https://uifabricicons.azurewebsites.net/

For lots of view formatting samples, click and visit.

I hope it will be helpful!

4 Comments

Join the conversation! Your thoughts help the community grow.

Jeff Collabmania4y ago
Hi,For more column formatting or view formatting options, I update the list and preview here : https://www.collabmania.com/2017/12/03/sharepoint-online-column-formatting-options/ https://www.collabmania.com/2018/09/09/sharepoint-view-formatting-options/
Nilanka Perera6y ago
I've tried formatting using JSON but only returns 30 items. Is this a bug?
- Sagar Pardeshi6y ago
  Go and edit view setting increase Item Limit.
mukund Lahane6y ago
Very nice!