Skip to content

Commit b886f25

Browse files
ldemarisVesaJuvonen
authored andcommitted
Update view-formatting.md (SharePoint#2118)
* Update view-formatting.md V1.0 of the view formatting docs to send to MVPs * Update view-formatting.md
1 parent f9757e5 commit b886f25

File tree

1 file changed

+4
-8
lines changed

1 file changed

+4
-8
lines changed

docs/declarative-customization/view-formatting.md

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,6 @@ ms.date: 06/08/2018
1111

1212
You can use view formatting to customize how views in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed with a row is loaded in a list view, and styles to be applied to those elements. View formatting does not change the data in list items of riles; 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 view formatting to configure how views are displayed.
1313

14-
For example, a list with no view formats applied might look like this:
15-
16-
A list with a view format that applies simple conditional formatting to the row based on the value of the Effort field might look like this:
17-
18-
A list with a more complex view format that totally reorganizes the structure and layout of the rows in the view might look like this:
19-
2014
> [!TIP]
2115
> Samples demonstrated in this article and numerous other community samples are available from a GitHub repository dedicated for open-sourced column formatting definitions. You can find these samples from the [sp-dev-list-formatting](https://github.com/SharePoint/sp-dev-list-formatting) repository at [SharePoint](https://github.com/SharePoint) GitHub organization.
2216
@@ -35,6 +29,7 @@ For a list of recommended classes to use inside view formats, please see the [St
3529
### Conditional formatting based on a date range
3630

3731
The following image shows a list view with conditional formatting applied based on a date range:
32+
![SharePoint list with view formatted with conditional formatting](../images/listformatting-additionalrowclass.png)
3833

3934
This example applies the class `sp-field-severity--severeWarning` to a list view row when the item's DueDate is before the current date/time.
4035

@@ -146,8 +141,9 @@ You can use view formatting to define a totally custom layout of field values in
146141
### Multi-line view style
147142

148143
The following image shows a list with a custom multi-line view style applied:
144+
![SharePoint list with multi-line view customization](../images/listformatting-rowformatter.png)
149145

150-
This example uses the `rowFormatter` element, which is used to totally override the rendering of a list view row. The `rowFormatter` in this example creates e a bounding `<div />` for every list view row. Inside this bounding box for every row, the `$Title` and `$Feedback` fields are displayed on separate lines. Under those fields, a `button` element is displayed that, when clicked, does the same thing as clicking the list row in an uncustomized view, which is opening the property form for the item. This `button` is displayed conditionally, when the value of the `$Assigned_x0020_To` field (assumed to be a person/group field) matches the current signed-in user.
146+
This example uses the `rowFormatter` element, which totally overrides the rendering of a list view row. The `rowFormatter` in this example creates a bounding `<div />` box for every list view row. Inside this bounding box, the `$Title` and `$Feedback` fields are displayed on separate lines. Under those fields, a `button` element is displayed that, when clicked, does the same thing as clicking the list row in an uncustomized view, which is opening the property form for the item. This `button` is displayed conditionally, when the value of the `$Assigned_x0020_To` field (assumed to be a person/group field) matches the current signed-in user.
151147

152148
```JSON
153149
{
@@ -269,6 +265,6 @@ Optional element. Specifies whether the ability to select rows in the view is d
269265

270266
`hideSelection` only takes effect when there's a `rowFormatter` element specified. If no `rowFormatter` is specified, then `hideSelection` is ignored.
271267

272-
### hideColumnHeader
268+
### hideListHeader
273269

274270
Optional element. Specifies whether the column headers in the view are hidden or not. *false* is the default behavior inside a list view. *true* means that the view will not display column headers.

0 commit comments

Comments
 (0)