Skip to content

Commit eb1002a

Browse files
rk-menonVesaJuvonen
authored andcommitted
Rk/url changes/added schema v2 (SharePoint#4502)
* Updated schema URLs to point to v2 & called out view formatting is not supported in SP2019 * Fixed typo
1 parent 01e45c8 commit eb1002a

File tree

2 files changed

+46
-38
lines changed

2 files changed

+46
-38
lines changed

docs/declarative-customization/column-formatting.md

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,17 @@ To preview the formatting, select **Preview**. To commit your changes, select **
5050

5151
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).
5252

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+
5357
## Display field values (basic)
5458

5559
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:
5660

5761
```JSON
5862
{
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",
6064
"elmType": "div",
6165
"txtContent": "@currentField"
6266
}
@@ -68,7 +72,7 @@ Some field types require a bit of extra work to retrieve their values. Person fi
6872

6973
```JSON
7074
{
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",
7276
"elmType": "div",
7377
"txtContent": "@currentField.title"
7478
}
@@ -80,7 +84,7 @@ Lookup fields are also represented as objects; the display text is stored in the
8084

8185
```JSON
8286
{
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",
8488
"elmType": "div",
8589
"txtContent": "@currentField.lookupValue"
8690
}
@@ -99,7 +103,7 @@ This example uses an Excel-style conditional expression (`=if`) to apply a class
99103

100104
```JSON
101105
{
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",
103107
"elmType": "div",
104108
"attributes": {
105109
"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
135139

136140
```JSON
137141
{
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",
139143
"elmType": "div",
140144
"attributes": {
141145
"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
176180
177181
```JSON
178182
{
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",
180184
"elmType": "div",
181185
"debugMode": true,
182186
"txtContent": "@currentField",
@@ -194,7 +198,7 @@ This example demonstrates an alternate syntax to express a conditional expressio
194198

195199
```JSON
196200
{
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",
198202
"elmType": "div",
199203
"txtContent": "@currentField",
200204
"style": {
@@ -225,7 +229,7 @@ This example demonstrates an alternate syntax to express a conditional expressio
225229
Here's the same sample from above, using the Excel-style expression syntax:
226230
```JSON
227231
{
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",
229233
"elmType": "div",
230234
"txtContent": "@currentField",
231235
"style": {
@@ -241,7 +245,7 @@ To compare a date/time field value against another date constant, use the `Date(
241245

242246
```JSON
243247
{
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",
245249
"elmType": "div",
246250
"txtContent": "@currentField",
247251
"style": {
@@ -271,7 +275,7 @@ To compare a date/time field value against another date constant, use the `Date(
271275
Here's the same sample from above, using the Excel-style expression syntax:
272276
```JSON
273277
{
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",
275279
"elmType": "div",
276280
"txtContent": "@currentField",
277281
"style": {
@@ -292,7 +296,7 @@ This example shows how to turn a text field that contains stock ticker symbols i
292296

293297
```JSON
294298
{
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",
296300
"elmType": "a",
297301
"txtContent": "@currentField",
298302
"attributes": {
@@ -315,7 +319,7 @@ You can use column formatting to render quick action links next to fields. The f
315319

316320
```JSON
317321
{
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",
319323
"elmType": "div",
320324
"children": [
321325
{
@@ -361,7 +365,7 @@ This example applies `background-color` and `border-top` styles to create a data
361365

362366
```JSON
363367
{
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",
365369
"elmType": "div",
366370
"children": [
367371
{
@@ -393,7 +397,7 @@ This example relies on two number fields, `Before` and `After`, for which the va
393397

394398
```JSON
395399
{
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",
397401
"elmType": "div",
398402
"children": [
399403
{
@@ -453,7 +457,7 @@ This example relies on two number fields, `Before` and `After`, for which the va
453457
Here's the same sample from above, using the Excel-style expression syntax:
454458
```JSON
455459
{
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",
457461
"elmType": "div",
458462
"children": [
459463
{
@@ -487,7 +491,7 @@ To use the sample below, you must substitute the ID of the Flow you want to run.
487491

488492
```JSON
489493
{
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",
491495
"elmType": "span",
492496
"style": {
493497
"color": "#0078d7"
@@ -528,7 +532,7 @@ This example uses the `length` operator to detect the number of members of the f
528532

529533
```json
530534
{
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",
532536
"elmType": "a",
533537
"style": {
534538
"display": "=if(length(@currentField) > 0, 'flex', 'none')"
@@ -583,7 +587,7 @@ This examples uses operator `loopIndex` and `length` to identify the last member
583587

584588
```json
585589
{
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",
587591
"elmType": "div",
588592
"style": {
589593
"display": "block"
@@ -621,7 +625,7 @@ This examples uses operator `loopIndex` to control the margins all rows but the
621625

622626
```json
623627
{
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",
625629
"elmType": "div",
626630
"style": {
627631
"min-height": "1.5em",
@@ -767,7 +771,7 @@ Creating custom column formatting JSON from scratch is simple if you understand
767771

768772
```JSON
769773
{
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"
771775
}
772776
```
773777

@@ -803,7 +807,7 @@ Any other value will result in an error.
803807

804808
```JSON
805809
{
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",
807811
"elmType": "button",
808812
"txtContent": "Open this item",
809813
"customRowAction": {
@@ -816,7 +820,7 @@ Any other value will result in an error.
816820

817821
```JSON
818822
{
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",
820824
"elmType": "button",
821825
"txtContent": "Share this item",
822826
"customRowAction": {
@@ -987,7 +991,7 @@ The following example shows the value of a style object. In this example, two st
987991

988992
```JSON
989993
{
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",
991995
"elmType": "div",
992996
"style": {
993997
"padding": "4px",
@@ -1012,7 +1016,7 @@ The following example shows the value of a style object. In this example, two st
10121016
Here's the same sample from above, using the Excel-style expression syntax:
10131017
```JSON
10141018
{
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",
10161020
"elmType": "div",
10171021
"style": {
10181022
"padding": "4px",
@@ -1040,7 +1044,7 @@ Any other attribute name will result in an error. Attribute values can either be
10401044

10411045
```JSON
10421046
{
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",
10441048
"target": "_blank",
10451049
"href": "='http://finance.yahoo.com/quote/' + @currentField"
10461050
}
@@ -1107,7 +1111,7 @@ The following example contains an Expression object that performs the following
11071111

11081112
```JSON
11091113
{
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",
11111115
"operator": "?",
11121116
"operands": [
11131117
{
@@ -1263,11 +1267,11 @@ Operators specify the type of operation to perform. The following operators are
12631267

12641268
**Ternary operators** - The following are operators that expect three operands:
12651269

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_
12711275

12721276
The substring() method returns the part of the string between the start and end indexes, or to the end of the string.
12731277

@@ -1338,7 +1342,7 @@ For example, the following JSON will display the current field (assuming it's a
13381342

13391343
```JSON
13401344
{
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",
13421346
"elmType": "div",
13431347
"txtContent": {
13441348
"operator": "toLocaleString()",
@@ -1350,7 +1354,7 @@ For example, the following JSON will display the current field (assuming it's a
13501354
Here's the same sample from above, using the Excel-style expression syntax:
13511355
```JSON
13521356
{
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",
13541358
"elmType": "div",
13551359
"txtContent": "=toLocaleString(@currentField)"
13561360
}
@@ -1373,7 +1377,7 @@ The following example shows how a lookup field might be used on a current field.
13731377

13741378
```JSON
13751379
{
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",
13771381
"elmType": "a",
13781382
"txtContent": "@currentField.lookupValue",
13791383
"attributes": {
@@ -1407,7 +1411,7 @@ The following example shows how a hyperlink field might be used on a current fie
14071411

14081412
```JSON
14091413
{
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",
14111415
"elmType": "a",
14121416
"txtContent": "@currentField.desc",
14131417
"attributes": {
@@ -1435,7 +1439,7 @@ This field can be used to display the current user's email address, but more lik
14351439

14361440
```JSON
14371441
{
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",
14391443
"elmType": "div",
14401444
"txtContent": "@currentField.title",
14411445
"style": {
@@ -1460,7 +1464,7 @@ This field can be used to display the current user's email address, but more lik
14601464
Here's the same sample from above, using the Excel-style expression syntax:
14611465
```JSON
14621466
{
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",
14641468
"elmType": "div",
14651469
"txtContent": "@currentField.title",
14661470
"style": {
@@ -1511,7 +1515,7 @@ These tokens will yield no value on non-file items including folders.
15111515
15121516
```json
15131517
{
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",
15151519
"elmType": "img",
15161520
"attributes": {
15171521
"src": "@thumbnail.200x150",

docs/declarative-customization/view-formatting.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ You can use view formatting to customize how views in SharePoint lists and libra
1212
> [!TIP]
1313
> Samples demonstrated in this article and numerous other community samples are available from a GitHub repository dedicated for open-sourced list formatting definitions. You can find these samples in the [sp-dev-list-formatting](https://github.com/SharePoint/sp-dev-list-formatting) repository within the [SharePoint](https://github.com/SharePoint) GitHub organization.
1414
15+
>[!NOTE]
16+
> View formatting is currently supported only in SharePoint Online.
17+
18+
1519
## Get started with view formatting
1620

1721
To open the view formatting pane, open the view dropdown and choose **Format this view**.

0 commit comments

Comments
 (0)