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/column-formattiing.md
+19-19Lines changed: 19 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,11 @@ You can use column formatting to customize how fields in SharePoint lists and li
7
7
8
8
For example, a list with the fields Title, Effort, Assigned To, and Status with no customizations applied might look like this:
9
9
10
-
10
+
11
11
12
12
A list with the appearance of the Effort, Assigned To, and Status fields customized via column formatting might look like this:
13
13
14
-
14
+
15
15
16
16
## How is column formatting different than the Field Customizer?
17
17
Both column formatting and the [SharePoint Framework Field Customizer](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer) extension enable you to customize how fields in SharePoint lists are displayed. The Field Customizer is more powerful, because you can use it to write any code you want to control how a field is displayed. Column formatting is more easily and broadly applied. However, it is less flexible, because it does not allow for custom code; it only allows for certain predefined elements and attributes.
@@ -31,7 +31,7 @@ To open the column formatting pane, open the dropdown menu under a column. Under
31
31
32
32
If no one has used column formatting on the column you selected, the pane will look like the following.
33
33
34
-
34
+
35
35
36
36
A field with no formatting specified will use the default rendering. To format a column, enter the column formatting JSON in the box.
37
37
@@ -72,7 +72,7 @@ You can use column formatting to apply styles, classes, and icons to fields, dep
72
72
### Conditional formatting based on a number range (basic)
73
73
The following image shows an example of conditional formatting applied to a number range.
74
74
75
-
75
+
76
76
77
77
This example customizes a number field to color that field red when its value less than 70. This example adds a style attribute to the parent `<div />` element, specifies a CSS class (`sp-field-severity--warning`) to apply to that item if the value inside the field is less than 70, and specifies no color if the value is outside that range (in which case it will use the default color for values in that list view).
78
78
Note: this example uses a binary operation with the less than operator, "<", nested inside the conditional operation indicated by the operator, ":". Another description of the section in the following example is: If @currentField < 70 Then class = sp-field-severity--warning.
@@ -104,7 +104,7 @@ Note: this example uses a binary operation with the less than operator, "<", nes
104
104
105
105
The following image shows an example of conditional formatting applied to a text or choice field.
106
106
107
-
107
+
108
108
109
109
You can apply conditional formatting to text or choice fields that might contain a fixed set of values. The following example applies different classes depending on whether the value of the field is Done, In Review, Blocked, or another value. This example applies a CSS class (`sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--blocked`) to the `<div />` based on the field's value. Then, it outputs a `<span />` element with an `IconName` attribute. This attribute applies another CSS class to that `<span />` that shows an [Office UI Fabric](https://dev.office.com/fabric#/) icon inside that element. Finally, another `<span />` element is outputted that contains the value inside the field.
110
110
@@ -289,7 +289,7 @@ Because dates are often used to track deadlines and key project timelines, a com
289
289
290
290
The following image shows a field with conditional date formatting applied.
291
291
292
-
292
+
293
293
294
294
This example colors the current field red when the value inside an item's DueDate is before the current date/time. Unlike some of the previous examples, this example applies formatting to one field by looking at the value inside another field. Note that DueDate is referenced using the [$FieldName] syntax. FieldName is assumed to be the internal name of the field. This example also takes advantage of a special value that can be used in date/time fields - `@now`, which resolves to the current date/time, evaluated when the user loads the list view.
295
295
@@ -382,7 +382,7 @@ You can use column formatting to provide hyperlinks that go to other web pages,
382
382
### Turn field values into hyperlinks (basic)
383
383
This example shows how to turn a text field that contains stock ticker symbols into a hyperlink that targets the Yahoo Finance real-time quotes page for that stock ticker. The example uses a `+` operator that appends the current field value to the static hyperlink <a>http://finance.yahoo.com/quote/</a>. You can extend this pattern to any scenario in which you want users to view contextual information related to an item, or you want to start a business process on the current item, as long as the information or process can be accessed via a hyperlink parameterized with values from the list item.
384
384
385
-
385
+
386
386
387
387
```JSON
388
388
{
@@ -403,7 +403,7 @@ This example shows how to turn a text field that contains stock ticker symbols i
403
403
### Add an action button to a field (advanced)
404
404
The following image shows action buttons added to a field.
405
405
406
-
406
+
407
407
408
408
You can use column formatting to render quick action links next to fields. The following example, intended for a person field, renders two elements inside the parent `<div />` element:
409
409
@@ -448,7 +448,7 @@ Use column formatting to combine conditional and arithmetical operations to achi
448
448
### Format a number column as a data bar (advanced)
449
449
The following image shows a number column formatted as a data bar.
450
450
451
-
451
+
452
452
453
453
This example applies `background-color` and `border-top` styles to create a data bar visualization of `@currentField`, which is a number field. The bars are sized differently for different values based on the way the `width` attribute is set - it's set to `100%` when the value is greater than 20, and `(@currentField * 5)%` when there value is less than 10. This achieves a width of 5% for the data bar for values of 1, 10% for values of 2, and so on. To fit this example to your number column, you can adjust the boundary condition (`20`) to match the maximum anticipated value inside the field, and the multiplier (`5`) to specify how much the bar should grow depending on the value inside the field.
454
454
```JSON
@@ -498,7 +498,7 @@ This example applies `background-color` and `border-top` styles to create a data
498
498
### Show trending up/trending down icons (advanced)
499
499
The following image shows a list with trending up/trending down icons added.
500
500
501
-
501
+
502
502
503
503
This example relies on two number fields, `Before` and `After`, for which the values can be compared. It shows the appropriate trending icon next to the `After` field, depending on that field's value compared to the value in `Before`. `sp-field-trending--up` is used when `After`'s value is higher; `sp-field-trending--down` is used when `After`'s value is lower.
504
504
@@ -582,15 +582,15 @@ You can use the following predefined classes for several common scenarios.
582
582
| Class name | Screenshot |
583
583
| ------------- |:-------------| :-----|
584
584
| sp-field-customFormatBackground |Specifies the padding and margins for all classes that use backgrounds. |
585
-
| sp-field-severity--good ||
586
-
| sp-field-severity--low ||
587
-
| sp-field-severity--warning ||
588
-
| sp-field-severity--severeWarning ||
589
-
| sp-field-severity--blocked ||
590
-
| sp-field-dataBars ||
591
-
| sp-field-trending--up ||
592
-
| sp-field-trending--down ||
593
-
| sp-field-quickAction ||
585
+
| sp-field-severity--good ||
586
+
| sp-field-severity--low ||
587
+
| sp-field-severity--warning ||
588
+
| sp-field-severity--severeWarning ||
589
+
| sp-field-severity--blocked ||
590
+
| sp-field-dataBars ||
591
+
| sp-field-trending--up ||
592
+
| sp-field-trending--down ||
593
+
| sp-field-quickAction ||
0 commit comments