You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/declarative-customization/view-formatting.md
+108-1Lines changed: 108 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -30,12 +30,119 @@ The easiest way to use view formatting is to start from an example and edit it t
30
30
31
31
You can use view formatting to apply a class to a list view row, depending on the value of one or more fields in the row. These examples leave the content and structure of list view rows intact.
32
32
33
+
Any conditional formatting scenario
34
+
33
35
For a list of recommended classes to use inside view formats, please see the [Style Guidelines section](https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#style-guidelines) in the [Column Formatting reference document.](https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md)
34
36
35
-
### Conditional formatting based on a number range
37
+
### Conditional formatting based on a date range
38
+
39
+
The following image shows a list view with conditional formatting applied based on a date range:
40
+
41
+
This example applies the class `sp-field-severity--severeWarning` to a list view row when the item's DueDate is before the current date/time.
42
+
43
+
```JSON
44
+
{
45
+
"additionalRowClass": {
46
+
"operator": "?",
47
+
"operands": [
48
+
{
49
+
"operator": "<=",
50
+
"operands": [
51
+
"[$DueDate]",
52
+
"@now"
53
+
]
54
+
},
55
+
"sp-field-severity--severeWarning",
56
+
""
57
+
]
58
+
}
59
+
}
60
+
```
36
61
37
62
### Conditional formatting based on the value in a text or choice field
38
63
64
+
The following image shows a list view with conditional formatting applied based on the value inside a choice field:
65
+
66
+
This example was adopted from a column formatting example, [Conditional formatting based on the value in a text of choice field](https://github.com/ldemaris/sp-dev-docs/blob/patch-7/docs/declarative-customization/column-formatting.md#conditional-formatting-based-on-the-value-in-a-text-or-choice-field-advanced), with some important differences to apply the concept to list view rows. The column formatting example applies both an icon and a class to a column based on the value of `@currentField`. The `additionalRowClass` attribute in view formatting, however, only allows you to specify a class and not an icon. Additionally, since `@currentField` always resolves to the value of the Title field when referenced inside a view format, this sample refers to the `$Status` field directly to determine which class to apply to the row.
67
+
68
+
```JSON
69
+
{
70
+
"additionalRowClass": {
71
+
"operator": "?",
72
+
"operands": [
73
+
{
74
+
"operator": "==",
75
+
"operands": [
76
+
{
77
+
"operator": "toString()",
78
+
"operands": [
79
+
"[$Status]"
80
+
]
81
+
},
82
+
"Done"
83
+
]
84
+
},
85
+
"sp-field-severity--good",
86
+
{
87
+
"operator": "?",
88
+
"operands": [
89
+
{
90
+
"operator": "==",
91
+
"operands": [
92
+
{
93
+
"operator": "toString()",
94
+
"operands": [
95
+
"[$Status]"
96
+
]
97
+
},
98
+
"In progress"
99
+
]
100
+
},
101
+
"sp-field-severity--low",
102
+
{
103
+
"operator": "?",
104
+
"operands": [
105
+
{
106
+
"operator": "==",
107
+
"operands": [
108
+
{
109
+
"operator": "toString()",
110
+
"operands": [
111
+
"[$Status]"
112
+
]
113
+
},
114
+
"In review"
115
+
]
116
+
},
117
+
"sp-field-severity--warning",
118
+
{
119
+
"operator": "?",
120
+
"operands": [
121
+
{
122
+
"operator": "==",
123
+
"operands": [
124
+
{
125
+
"operator": "toString()",
126
+
"operands": [
127
+
"[$Status]"
128
+
]
129
+
},
130
+
"Blocked"
131
+
]
132
+
},
133
+
"sp-field-severity--severeWarning",
134
+
"sp-field-severity--blocked"
135
+
]
136
+
}
137
+
]
138
+
}
139
+
]
140
+
}
141
+
]
142
+
}
143
+
}
144
+
```
145
+
39
146
## Build custom row layouts
40
147
41
148
You can use view formatting to define a totally custom layout of field values inside a row.
0 commit comments