Skip to content

Commit 071dff4

Browse files
committed
♻️ proof & fix numerous msdocs, typos, formating, and gramatical errors
1 parent e59c8d9 commit 071dff4

7 files changed

+426
-424
lines changed

docs/declarative-customization/column-formatting.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ ms.localizationpriority: high
77

88
# Use column formatting to customize SharePoint
99

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.
1111

1212
For example, a list with the fields Title, Effort, Assigned To, and Status with no customizations applied might look like this:
1313

@@ -24,17 +24,17 @@ A list with the appearance of the **Effort**, **Assigned To**, and **Status** fi
2424

2525
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.
2626

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.
2828

2929
The following table compares column formatting and the Field Customizer.
3030

3131
| Field type | Column formatting | Field Customizer |
3232
| ------------- |:-------------| :-----|
3333
| 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 |
3535
| Data visualizations | Support for simple visualizations that can be expressed using HTML and CSS | Support for arbitrary data visualizations |
3636

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.
3838

3939
## Get started with column formatting
4040

@@ -174,7 +174,7 @@ The following image shows a field with conditional date formatting applied:
174174

175175
![Status field with the Overdue text colored red](../images/sp-columnformatting-overdue.png)
176176

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.
178178

179179
> [!NOTE]
180180
> 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
555555

556556
![Screenshot of a field reads "North America, APAC, and Europe"](../images/sp-columnformatting-multi-value-1.png)
557557

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.
559559

560560
```json
561561
{
@@ -589,11 +589,12 @@ This examples uses operator `loopIndex` and `length` to identify the last member
589589
```
590590

591591
### Complex HTML elements formatting
592+
592593
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.
593594

594595
![List with name "Owners" and 3 rows where each user in the field has a profile picture, name and email displayed, and a small gray counter of owners at top left corner that has a different color when it says 0.](../images/sp-columnformatting-multi-value-2.png)
595596

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.
597598

598599
```json
599600
{
@@ -746,7 +747,7 @@ You can use predefined icons from Fluent UI. For details, see the [Fluent UI web
746747

747748
## Creating custom JSON
748749

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.
750751

751752
> [!TIP]
752753
> At any point, select **Ctrl**+**Space** for property/value suggestions.

docs/declarative-customization/customize-default-site-design.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ To customize a default site template, apply a new template script using PowerShe
2020
| WebTemplate | 68 | Communication site template |
2121
| WebTemplate | 69 | Channel site template |
2222

23-
2423
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.
2524

2625
```powershell
@@ -32,8 +31,6 @@ C:\> Add-SPOSiteDesign `
3231
-IsDefault
3332
```
3433

35-
<br/>
36-
3734
```javascript
3835
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}});
3936
```
@@ -42,7 +39,6 @@ RestRequest("/_api/Microsoft.SharePoint.Utilities.WebTemplateExtensions.SiteScri
4239

4340
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.
4441

45-
4642
## Restore the default site templates
4743

4844
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
5147
C:\> Remove-SPOSiteDesign db752673-18fd-44db-865a-aa3e0b28698e
5248
```
5349

54-
<br/>
55-
5650
```javascript
5751
RestRequest("/_api/Microsoft.SharePoint.Utilities.WebTemplateExtensions.SiteScriptUtility.DeleteSiteDesign", {id:"db752673-18fd-44db-865a-aa3e0b28698e"});
5852
```

docs/declarative-customization/formatting-advanced.md

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ The following screenshot shows a list with a Flow button added to the Action col
1414

1515
![screenshot of the sample](../images/sp-columnformatting-flow.png)
1616

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.
1818

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.
2020

2121
To obtain the ID of a flow that is solution-aware:
2222

@@ -28,7 +28,7 @@ To obtain the ID of a flow that is solution-aware:
2828
1. Select Export > Get flow identifier.
2929
1. Copy the ID.
3030

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:
3232

3333
1. Select **Flow > See your flows** in the SharePoint list where the Flow is configured.
3434
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
8282

8383
![Preview Image 2](../images/HoverImage-2.png)
8484

85-
You can use formatting to define custom call out that can be commissioned basis user defined 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.
8686

8787
This example uses `customCardProps`, `openOnEvent`, `directionalHint` and `isBeakVisible`:
8888

@@ -271,23 +271,23 @@ A special json property `inlineEditField` is used with value as the field intern
271271

272272
![Inline Editing using inlineEditField property](../images/sp-columnformatting-inline-editing.gif)
273273

274-
This allows the users to edit items in-place, within the view, without navigating away to grid based 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.
275275

276276
### Supported Field Types
277277

278278
List of supported field types for inline editing:
279279

280280
- Single line text
281-
- Multi line text (without RTF)
281+
- Multiline text (without RTF)
282282
- Number
283283
- DateTime
284284
- Choice and MultiChoice
285-
- User and Multi user
285+
- User and Multiuser
286286
- Lookup
287287

288288
### Hover Borders and Customizations
289289

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`.
291291

292292
```json
293293
{
@@ -305,7 +305,7 @@ The inline editing adds a hover border on the elements to indicate these element
305305

306306
## Set multiple field values of an Item using customRowAction
307307

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.
309309

310310
The below JSON will set value of `FieldInternalName_1`, `FieldInternalName_2`, and `FieldInternalName_3`with the values provided:
311311

@@ -327,38 +327,42 @@ The below JSON will set value of `FieldInternalName_1`, `FieldInternalName_2`, a
327327
### Supported Field Types
328328

329329
- Single line text
330-
- Multi line text (without RTF)
330+
- Multiline text (without RTF)
331331
- Number
332332
- DateTime
333333
- Choice and MultiChoice
334-
- User and Multi user
334+
- User and Multiuser
335335

336336
### Value Field values in `actionInput`:
337337

338338
- Text values:
339339
- a valid string like `"Choice 1"`
340-
- value from other columns : `[$ColumnName]`
340+
- value from other columns: `[$ColumnName]`
341341
- an [expression](./formatting-syntax-reference.md#expressions) such as:
342342

343-
`"if([$column]> 10, "Choice A", "Choice B")"`
343+
```
344+
"if([$column]> 10, "Choice A", "Choice B")"
345+
```
344346
345347
or
346348
347-
`{operator: "+", operands" : ["Choice", "A"]}`
349+
```
350+
{operator: "+", operands" : ["Choice", "A"]}
351+
```
348352
349353
- Number:
350354
- a valid number
351-
- value from other columns : `[$ColumnName]`
355+
- value from other columns: `[$ColumnName]`
352356
- an [expression](./formatting-syntax-reference.md#expressions)
353357
- Date values:
354358
- a date string
355359
- `@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
358362
- an empty string `""` clears the field value
359363
- Multi-Choice and Multi-Person:
360364
- 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.
362366
- `appendTo([$MultiChoiceField], 'MyValue')`
363367
- `removeFrom([$MultiUserField], @me)`: removes all occurrences that match the second parameter
364368
- `replace([$MultiChoiceField], 'Choice 1', 'Choice 3')`: replaces all occurrences of second parameter with third.

0 commit comments

Comments
 (0)