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-formatting.md
+9-8Lines changed: 9 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ ms.localizationpriority: high
7
7
8
8
# Use column formatting to customize SharePoint
9
9
10
-
You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it’s displayed to users who browse the list. Anyone who can create and manage views in a list can use column formatting to configure how view fields are displayed.
10
+
You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting doesn't change the data in the list item or file; it only changes how it’s displayed to users who browse the list. Anyone who can create and manage views in a list can use column formatting to configure how view fields are displayed.
11
11
12
12
For example, a list with the fields Title, Effort, Assigned To, and Status with no customizations applied might look like this:
13
13
@@ -24,17 +24,17 @@ A list with the appearance of the **Effort**, **Assigned To**, and **Status** fi
24
24
25
25
Both column formatting and [SharePoint Framework Field Customizer](../spfx/extensions/get-started/building-simple-field-customizer.md) extensions 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 that you want to control how a field is displayed.
26
26
27
-
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.
27
+
Column formatting is more easily and broadly applied. However, it's less flexible, because it doesn't allow for custom code; it only allows for certain predefined elements and attributes.
28
28
29
29
The following table compares column formatting and the Field Customizer.
30
30
31
31
| Field type | Column formatting | Field Customizer |
32
32
| ------------- |:-------------| :-----|
33
33
| Conditional formatting based on item values and value ranges | Supported | Supported |
34
-
| Action links | Support for static hyperlinks that do not launch script | Support for any hyperlink, including those that invoke custom script |
34
+
| Action links | Support for static hyperlinks that don't launch script | Support for any hyperlink, including those that invoke custom script |
35
35
| Data visualizations | Support for simple visualizations that can be expressed using HTML and CSS | Support for arbitrary data visualizations |
36
36
37
-
If you can accomplish your scenario by using column formatting, it’s typically quicker and easier to do that than to use a Field Customizer. Anyone who can create and manage views in a list can use column formatting to create and publish customizations. Use a Field Customizer for more advanced scenarios that column formatting does not support.
37
+
If you can accomplish your scenario by using column formatting, it’s typically quicker and easier to do that than to use a Field Customizer. Anyone who can create and manage views in a list can use column formatting to create and publish customizations. Use a Field Customizer for more advanced scenarios that column formatting doesn't support.
38
38
39
39
## Get started with column formatting
40
40
@@ -174,7 +174,7 @@ The following image shows a field with conditional date formatting applied:
174
174
175
175

176
176
177
-
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.
177
+
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.
178
178
179
179
> [!NOTE]
180
180
> If you have spaces in the field name, those are defined as `_x0020_`. For example, a field named "Due Date" should be referenced as `$Due_x0020_Date`.
@@ -555,7 +555,7 @@ The following image shows an example of constructing a simple sentence from the
555
555
556
556

557
557
558
-
This examples uses operator `loopIndex` and `length` to identify the last member of the field, and attribute `forEach` to duplicate HTML elements.
558
+
This example uses operator `loopIndex` and `length` to identify the last member of the field, and attribute `forEach` to duplicate HTML elements.
559
559
560
560
```json
561
561
{
@@ -589,11 +589,12 @@ This examples uses operator `loopIndex` and `length` to identify the last member
589
589
```
590
590
591
591
### Complex HTML elements formatting
592
+
592
593
The following image shows an example of building a list of users with pictures, email addresses and a simple counter for the number of members at the top.
593
594
594
595

595
596
596
-
This examples uses operator `loopIndex` to control the margins all rows but the first one, and attribute `forEach` to build the list of members.
597
+
This example uses operator `loopIndex` to control the margins all rows but the first one, and attribute `forEach` to build the list of members.
597
598
598
599
```json
599
600
{
@@ -746,7 +747,7 @@ You can use predefined icons from Fluent UI. For details, see the [Fluent UI web
746
747
747
748
## Creating custom JSON
748
749
749
-
Creating custom column formatting JSON from scratch is simple if user understands the schema, Monaco Editor is integrated in the formatting pane with pre-filled JSON column schema reference to assist in creation of column formatting, Monaco editor has validation and autocomplete to help in crafting right JSON. User can start adding JSON after the first line that defines the schema ___location.
750
+
Creating custom column formatting JSON from scratch is simple if user understands the schema, Monaco Editor is integrated in the formatting pane with pre-filled JSON column schema reference to help creation of column formatting, Monaco editor has validation and autocomplete to help in crafting right JSON. User can start adding JSON after the first line that defines the schema ___location.
750
751
751
752
> [!TIP]
752
753
> At any point, select **Ctrl**+**Space** for property/value suggestions.
Copy file name to clipboardExpand all lines: docs/declarative-customization/customize-default-site-design.md
-6Lines changed: 0 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -20,7 +20,6 @@ To customize a default site template, apply a new template script using PowerShe
20
20
| WebTemplate | 68 | Communication site template |
21
21
| WebTemplate | 69 | Channel site template |
22
22
23
-
24
23
The following example shows how to use the **IsDefault** switch to apply the Contoso company theme to the default site templates. The site script referenced by ID contains the JSON script to apply the correct theme.
25
24
26
25
```powershell
@@ -32,8 +31,6 @@ C:\> Add-SPOSiteDesign `
32
31
-IsDefault
33
32
```
34
33
35
-
<br/>
36
-
37
34
```javascript
38
35
RestRequest("/_api/Microsoft.SharePoint.Utilities.WebTemplateExtensions.SiteScriptUtility.CreateSiteDesign", {info:{Title:"Contoso company theme", Description:"Applies standard company theme to site", SiteScriptIds:["89516c6d-9f4d-4a57-ae79-36b0c95a817b"], WebTemplate:"68", IsDefault:true}});
The default site template for a communication site is the **Topic** template. The default for a team site is the **Team collaboration** template. When you apply a new default site template, it updates the Microsoft-provided default templates.
44
41
45
-
46
42
## Restore the default site templates
47
43
48
44
To restore a site template to the defaults, remove the site template script that you applied. In the previous example, if the site template created had the ID `db752673-18fd-44db-865a-aa3e0b28698e`, you would remove it as shown in the following example.
@@ -51,8 +47,6 @@ To restore a site template to the defaults, remove the site template script that
Copy file name to clipboardExpand all lines: docs/declarative-customization/formatting-advanced.md
+22-18Lines changed: 22 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -14,9 +14,9 @@ The following screenshot shows a list with a Flow button added to the Action col
14
14
15
15

16
16
17
-
You can use column formatting to create buttons that, when selected, run Flows on the corresponding list item. For flows that are [solution-aware](/power-automate/overview-solution-flows), the Flow Launch Panel will be displayed after choosing the button and you must select Run Flow to start the flow. For flows that are not solution-aware, The Flow Launch Panel will be displayed after choosing the button and the Flow will just run.
17
+
You can use column formatting to create buttons that, when selected, run Flows on the corresponding list item. For flows that are [solution-aware](/power-automate/overview-solution-flows), the Flow Launch Panel will be displayed after choosing the button and you must select Run Flow to start the flow. For flows that aren't solution-aware, The Flow Launch Panel will be displayed after choosing the button and the Flow will just run.
18
18
19
-
To use the sample below, you must substitute the ID of the Flow you want to run. This ID is contained within the `actionParams` property of the `customRowAction` attribute inside the `button` element.
19
+
To use the sample below, you must substitute the ID of the Flow you want to run. This ID is contained within the `actionParams` property of the `customRowAction` attribute inside the `button` element.
20
20
21
21
To obtain the ID of a flow that is solution-aware:
22
22
@@ -28,7 +28,7 @@ To obtain the ID of a flow that is solution-aware:
28
28
1. Select Export > Get flow identifier.
29
29
1. Copy the ID.
30
30
31
-
To obtain the ID of a flow that is not solution-aware:
31
+
To obtain the ID of a flow that isn't solution-aware:
32
32
33
33
1. Select **Flow > See your flows** in the SharePoint list where the Flow is configured.
34
34
1. Select the Flow you want to run.
@@ -82,7 +82,7 @@ On hover - Metadata on the column "Status" is made available in column formattin
82
82
83
83

84
84
85
-
You can use formatting to define custom call out that can be commissioned basis userdefined actions like click or hover.
85
+
You can use formatting to define custom call out that can be commissioned basis user-defined actions like click or hover.
86
86
87
87
This example uses `customCardProps`, `openOnEvent`, `directionalHint` and `isBeakVisible`:
88
88
@@ -271,23 +271,23 @@ A special json property `inlineEditField` is used with value as the field intern
271
271
272
272

273
273
274
-
This allows the users to edit items in-place, within the view, without navigating away to gridbased editing or to a item edit form.
274
+
This allows the users to edit items in-place, within the view, without navigating away to grid-based editing or to an item edit form.
275
275
276
276
### Supported Field Types
277
277
278
278
List of supported field types for inline editing:
279
279
280
280
- Single line text
281
-
-Multi line text (without RTF)
281
+
-Multiline text (without RTF)
282
282
- Number
283
283
- DateTime
284
284
- Choice and MultiChoice
285
-
- User and Multi user
285
+
- User and Multiuser
286
286
- Lookup
287
287
288
288
### Hover Borders and Customizations
289
289
290
-
The inline editing adds a hover border on the elements to indicate these elements have an associated action. The default border is `neutralSecondary`, and on click, the editor appears with a `themePrimary` border. These border colors can be overriden via setting style on the same element with `inlineEditField` by using some special attributes - `--inline-editor-border-width`, `--inline-editor-border-style`, `--inline-editor-border-radius`, and `--inline-editor-border-color`.
290
+
The inline editing adds a hover border on the elements to indicate these elements have an associated action. The default border is `neutralSecondary`, and on click, the editor appears with a `themePrimary` border. These border colors can be overridden via setting style on the same element with `inlineEditField` by using some special attributes - `--inline-editor-border-width`, `--inline-editor-border-style`, `--inline-editor-border-radius`, and `--inline-editor-border-color`.
291
291
292
292
```json
293
293
{
@@ -305,7 +305,7 @@ The inline editing adds a hover border on the elements to indicate these element
305
305
306
306
## Set multiple field values of an Item using customRowAction
307
307
308
-
With the new `setValue` and `customRowAction` properties, formatters can render action buttons which modify the item internally without opening editors or forms. `setValue` also allows setting multiple field values of the item at once.
308
+
With the new `setValue` and `customRowAction` properties, formatters can render action buttons that modify the item internally without opening editors or forms. `setValue` also allows setting multiple field values of the item at once.
309
309
310
310
The below JSON will set value of `FieldInternalName_1`, `FieldInternalName_2`, and `FieldInternalName_3`with the values provided:
311
311
@@ -327,38 +327,42 @@ The below JSON will set value of `FieldInternalName_1`, `FieldInternalName_2`, a
327
327
### Supported Field Types
328
328
329
329
- Single line text
330
-
-Multi line text (without RTF)
330
+
-Multiline text (without RTF)
331
331
- Number
332
332
- DateTime
333
333
- Choice and MultiChoice
334
-
- User and Multi user
334
+
- User and Multiuser
335
335
336
336
### Value Field values in `actionInput`:
337
337
338
338
- Text values:
339
339
- a valid string like `"Choice 1"`
340
-
- value from other columns: `[$ColumnName]`
340
+
- value from other columns: `[$ColumnName]`
341
341
- an [expression](./formatting-syntax-reference.md#expressions) such as:
342
342
343
-
`"if([$column]> 10, "Choice A", "Choice B")"`
343
+
```
344
+
"if([$column]> 10, "Choice A", "Choice B")"
345
+
```
344
346
345
347
or
346
348
347
-
`{operator: "+", operands" : ["Choice", "A"]}`
349
+
```
350
+
{operator: "+", operands" : ["Choice", "A"]}
351
+
```
348
352
349
353
- Number:
350
354
- a valid number
351
-
- value from other columns: `[$ColumnName]`
355
+
- value from other columns: `[$ColumnName]`
352
356
- an [expression](./formatting-syntax-reference.md#expressions)
353
357
- Date values:
354
358
- a date string
355
359
- `@now` token
356
-
-[expressions](./formatting-syntax-reference.md#expressions)which return a date using builtin date functions
357
-
-`addDays` and `addMinutes`, two new functions to support [expressions](./formatting-syntax-reference.md#expressions) like 7 days from today
360
+
- [expressions](./formatting-syntax-reference.md#expressions) that return a date using built-in date functions
361
+
- `addDays` and `addMinutes`, two new functions to support [expressions](./formatting-syntax-reference.md#expressions) like seven days from today
358
362
- an empty string `""` clears the field value
359
363
- Multi-Choice and Multi-Person:
360
364
- Multi value fields are special, as they need an array value to save multiple values.
361
-
-`appendTo`, `removeFrom`, and `replace`, three functions which can operate on multivalue fields.
365
+
- `appendTo`, `removeFrom`, and `replace`, three functions that can operate on multivalue fields.
362
366
- `appendTo([$MultiChoiceField], 'MyValue')`
363
367
- `removeFrom([$MultiUserField], @me)`: removes all occurrences that match the second parameter
364
368
- `replace([$MultiChoiceField], 'Choice 1', 'Choice 3')`: replaces all occurrences of second parameter with third.
0 commit comments