@@ -50,13 +50,17 @@ To preview the formatting, select **Preview**. To commit your changes, select **
50
50
51
51
The easiest way to use column formatting is to start from an example and edit it to apply to your specific field. The following sections contain examples that you can copy, paste, and edit for your scenarios. There are also several samples available in the [ SharePoint/sp-dev-column-formatting repository] ( https://github.com/SharePoint/sp-dev-column-formatting ) .
52
52
53
+ > [ !NOTE]
54
+ > All examples in this document refer to the json schema used in SharePoint Online. To format columns on SharePoint 2019, please use ` https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json ` as the schema.
55
+
56
+
53
57
## Display field values (basic)
54
58
55
59
The simplest column formatting is one that places the value of the field inside a ` <div /> ` element. This example works for number, text, choice, and date fields:
56
60
57
61
``` JSON
58
62
{
59
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
63
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
60
64
"elmType" : " div" ,
61
65
"txtContent" : " @currentField"
62
66
}
@@ -68,7 +72,7 @@ Some field types require a bit of extra work to retrieve their values. Person fi
68
72
69
73
``` JSON
70
74
{
71
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
75
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
72
76
"elmType" : " div" ,
73
77
"txtContent" : " @currentField.title"
74
78
}
@@ -80,7 +84,7 @@ Lookup fields are also represented as objects; the display text is stored in the
80
84
81
85
``` JSON
82
86
{
83
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
87
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
84
88
"elmType" : " div" ,
85
89
"txtContent" : " @currentField.lookupValue"
86
90
}
@@ -99,7 +103,7 @@ This example uses an Excel-style conditional expression (`=if`) to apply a class
99
103
100
104
``` JSON
101
105
{
102
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
106
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
103
107
"elmType" : " div" ,
104
108
"attributes" : {
105
109
"class" : " =if(@currentField <= 70,'sp-field-severity--warning', '')"
@@ -135,7 +139,7 @@ This pattern is useful when you want different values to map to different levels
135
139
136
140
``` JSON
137
141
{
138
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
142
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
139
143
"elmType" : " div" ,
140
144
"attributes" : {
141
145
"class" : " =if(@currentField == 'Done', 'sp-field-severity--good', if(@currentField == 'In progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Has issues', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
@@ -176,7 +180,7 @@ This example colors the current field red when the value inside an item's DueDat
176
180
177
181
``` JSON
178
182
{
179
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
183
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
180
184
"elmType" : " div" ,
181
185
"debugMode" : true ,
182
186
"txtContent" : " @currentField" ,
@@ -194,7 +198,7 @@ This example demonstrates an alternate syntax to express a conditional expressio
194
198
195
199
``` JSON
196
200
{
197
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
201
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
198
202
"elmType" : " div" ,
199
203
"txtContent" : " @currentField" ,
200
204
"style" : {
@@ -225,7 +229,7 @@ This example demonstrates an alternate syntax to express a conditional expressio
225
229
Here's the same sample from above, using the Excel-style expression syntax:
226
230
``` JSON
227
231
{
228
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
232
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
229
233
"elmType" : " div" ,
230
234
"txtContent" : " @currentField" ,
231
235
"style" : {
@@ -241,7 +245,7 @@ To compare a date/time field value against another date constant, use the `Date(
241
245
242
246
``` JSON
243
247
{
244
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
248
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
245
249
"elmType" : " div" ,
246
250
"txtContent" : " @currentField" ,
247
251
"style" : {
@@ -271,7 +275,7 @@ To compare a date/time field value against another date constant, use the `Date(
271
275
Here's the same sample from above, using the Excel-style expression syntax:
272
276
``` JSON
273
277
{
274
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
278
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
275
279
"elmType" : " div" ,
276
280
"txtContent" : " @currentField" ,
277
281
"style" : {
@@ -292,7 +296,7 @@ This example shows how to turn a text field that contains stock ticker symbols i
292
296
293
297
``` JSON
294
298
{
295
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
299
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
296
300
"elmType" : " a" ,
297
301
"txtContent" : " @currentField" ,
298
302
"attributes" : {
@@ -315,7 +319,7 @@ You can use column formatting to render quick action links next to fields. The f
315
319
316
320
``` JSON
317
321
{
318
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
322
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
319
323
"elmType" : " div" ,
320
324
"children" : [
321
325
{
@@ -361,7 +365,7 @@ This example applies `background-color` and `border-top` styles to create a data
361
365
362
366
``` JSON
363
367
{
364
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
368
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
365
369
"elmType" : " div" ,
366
370
"children" : [
367
371
{
@@ -393,7 +397,7 @@ This example relies on two number fields, `Before` and `After`, for which the va
393
397
394
398
``` JSON
395
399
{
396
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
400
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
397
401
"elmType" : " div" ,
398
402
"children" : [
399
403
{
@@ -453,7 +457,7 @@ This example relies on two number fields, `Before` and `After`, for which the va
453
457
Here's the same sample from above, using the Excel-style expression syntax:
454
458
``` JSON
455
459
{
456
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
460
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
457
461
"elmType" : " div" ,
458
462
"children" : [
459
463
{
@@ -487,7 +491,7 @@ To use the sample below, you must substitute the ID of the Flow you want to run.
487
491
488
492
``` JSON
489
493
{
490
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
494
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
491
495
"elmType" : " span" ,
492
496
"style" : {
493
497
"color" : " #0078d7"
@@ -528,7 +532,7 @@ This example uses the `length` operator to detect the number of members of the f
528
532
529
533
``` json
530
534
{
531
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
535
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
532
536
"elmType" : " a" ,
533
537
"style" : {
534
538
"display" : " =if(length(@currentField) > 0, 'flex', 'none')"
@@ -583,7 +587,7 @@ This examples uses operator `loopIndex` and `length` to identify the last member
583
587
584
588
``` json
585
589
{
586
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
590
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
587
591
"elmType" : " div" ,
588
592
"style" : {
589
593
"display" : " block"
@@ -621,7 +625,7 @@ This examples uses operator `loopIndex` to control the margins all rows but the
621
625
622
626
``` json
623
627
{
624
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
628
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
625
629
"elmType" : " div" ,
626
630
"style" : {
627
631
"min-height" : " 1.5em" ,
@@ -767,7 +771,7 @@ Creating custom column formatting JSON from scratch is simple if you understand
767
771
768
772
``` JSON
769
773
{
770
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json"
774
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json"
771
775
}
772
776
```
773
777
@@ -803,7 +807,7 @@ Any other value will result in an error.
803
807
804
808
``` JSON
805
809
{
806
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
810
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
807
811
"elmType" : " button" ,
808
812
"txtContent" : " Open this item" ,
809
813
"customRowAction" : {
@@ -816,7 +820,7 @@ Any other value will result in an error.
816
820
817
821
``` JSON
818
822
{
819
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
823
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
820
824
"elmType" : " button" ,
821
825
"txtContent" : " Share this item" ,
822
826
"customRowAction" : {
@@ -987,7 +991,7 @@ The following example shows the value of a style object. In this example, two st
987
991
988
992
``` JSON
989
993
{
990
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
994
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
991
995
"elmType" : " div" ,
992
996
"style" : {
993
997
"padding" : " 4px" ,
@@ -1012,7 +1016,7 @@ The following example shows the value of a style object. In this example, two st
1012
1016
Here's the same sample from above, using the Excel-style expression syntax:
1013
1017
``` JSON
1014
1018
{
1015
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1019
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1016
1020
"elmType" : " div" ,
1017
1021
"style" : {
1018
1022
"padding" : " 4px" ,
@@ -1040,7 +1044,7 @@ Any other attribute name will result in an error. Attribute values can either be
1040
1044
1041
1045
``` JSON
1042
1046
{
1043
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1047
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1044
1048
"target" : " _blank" ,
1045
1049
"href" : " ='http://finance.yahoo.com/quote/' + @currentField"
1046
1050
}
@@ -1107,7 +1111,7 @@ The following example contains an Expression object that performs the following
1107
1111
1108
1112
``` JSON
1109
1113
{
1110
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1114
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1111
1115
"operator" : " ?" ,
1112
1116
"operands" : [
1113
1117
{
@@ -1263,11 +1267,11 @@ Operators specify the type of operation to perform. The following operators are
1263
1267
1264
1268
** Ternary operators** - The following are operators that expect three operands:
1265
1269
1266
- - ** subString ** : returns the part of the string between the start and end indicies. - _ Only available in SharePoint Online_
1267
- - ` "txtContent":"=subString ('DogFood', 3, 4)" ` results in _ Fo_
1268
- - ` "txtContent":"=subString ('DogFood', 4, 3)" ` results in _ Fo_
1269
- - ` "txtContent":"=subString ('DogFood', 3, 6)" ` results in _ Food_
1270
- - ` "txtContent":"=subString ('DogFood', 6, 3)" ` results in _ Food_
1270
+ - ** substring ** : returns the part of the string between the start and end indicies. - _ Only available in SharePoint Online_
1271
+ - ` "txtContent":"=substring ('DogFood', 3, 4)" ` results in _ Fo_
1272
+ - ` "txtContent":"=substring ('DogFood', 4, 3)" ` results in _ Fo_
1273
+ - ` "txtContent":"=substring ('DogFood', 3, 6)" ` results in _ Food_
1274
+ - ` "txtContent":"=substring ('DogFood', 6, 3)" ` results in _ Food_
1271
1275
1272
1276
The substring() method returns the part of the string between the start and end indexes, or to the end of the string.
1273
1277
@@ -1338,7 +1342,7 @@ For example, the following JSON will display the current field (assuming it's a
1338
1342
1339
1343
``` JSON
1340
1344
{
1341
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1345
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1342
1346
"elmType" : " div" ,
1343
1347
"txtContent" : {
1344
1348
"operator" : " toLocaleString()" ,
@@ -1350,7 +1354,7 @@ For example, the following JSON will display the current field (assuming it's a
1350
1354
Here's the same sample from above, using the Excel-style expression syntax:
1351
1355
``` JSON
1352
1356
{
1353
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1357
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1354
1358
"elmType" : " div" ,
1355
1359
"txtContent" : " =toLocaleString(@currentField)"
1356
1360
}
@@ -1373,7 +1377,7 @@ The following example shows how a lookup field might be used on a current field.
1373
1377
1374
1378
``` JSON
1375
1379
{
1376
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1380
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1377
1381
"elmType" : " a" ,
1378
1382
"txtContent" : " @currentField.lookupValue" ,
1379
1383
"attributes" : {
@@ -1407,7 +1411,7 @@ The following example shows how a hyperlink field might be used on a current fie
1407
1411
1408
1412
``` JSON
1409
1413
{
1410
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1414
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1411
1415
"elmType" : " a" ,
1412
1416
"txtContent" : " @currentField.desc" ,
1413
1417
"attributes" : {
@@ -1435,7 +1439,7 @@ This field can be used to display the current user's email address, but more lik
1435
1439
1436
1440
``` JSON
1437
1441
{
1438
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1442
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1439
1443
"elmType" : " div" ,
1440
1444
"txtContent" : " @currentField.title" ,
1441
1445
"style" : {
@@ -1460,7 +1464,7 @@ This field can be used to display the current user's email address, but more lik
1460
1464
Here's the same sample from above, using the Excel-style expression syntax:
1461
1465
``` JSON
1462
1466
{
1463
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1467
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1464
1468
"elmType" : " div" ,
1465
1469
"txtContent" : " @currentField.title" ,
1466
1470
"style" : {
@@ -1511,7 +1515,7 @@ These tokens will yield no value on non-file items including folders.
1511
1515
1512
1516
``` json
1513
1517
{
1514
- "$schema" : " https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json" ,
1518
+ "$schema" : " https://developer.microsoft.com/json-schemas/sp/v2/ column-formatting.schema.json" ,
1515
1519
"elmType" : " img" ,
1516
1520
"attributes" : {
1517
1521
"src" : " @thumbnail.200x150" ,
0 commit comments