|
| 1 | +--- |
| 2 | +title: Use view formatting to customize SharePoint |
| 3 | +description: Customize how views in SharePoint lists and libraries are displayed by constructing a JSON object that describes the elements that are displayed in a list view, and the styles to be applied to those elements. |
| 4 | +ms.date: 06/08/2018 |
| 5 | +--- |
| 6 | +> [!NOTE] |
| 7 | +> The View Formatting feature is not currently in production. This is draft documentation and is subject to change before the feature is released. |
| 8 | + |
| 9 | +# Use view formatting to customize SharePoint |
| 10 | + |
| 11 | +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. |
| 12 | + |
| 13 | +For example, a list with no view formats applied might look like this: |
| 14 | + |
| 15 | +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: |
| 16 | + |
| 17 | +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: |
| 18 | + |
| 19 | +> [!TIP] |
| 20 | +> 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. |
| 21 | + |
| 22 | +## Get started with view formatting |
| 23 | + |
| 24 | +To open the view formatting pane, open the view dropdown, and choose **Format this view**. |
| 25 | + |
| 26 | +The easiest way to use view formatting is to start from an example and edit it to apply to your specific view. 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-list-formatting repository](https://github.com/SharePoint/sp-dev-list-formatting). |
| 27 | + |
| 28 | +## Apply conditional formatting |
| 29 | +You can use view formatting to apply a class to a list view row, depending on the value of one or more fields in the row. These examples leave the content and structure of list view rows intact. |
| 30 | + |
| 31 | +For a list of recommended classes to use inside view formats, please see the [Style Guidelines section](https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#style-guidelines) in the [Column Formatting reference document.](https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md) |
| 32 | + |
| 33 | +### Conditional formatting based on a number range |
| 34 | + |
| 35 | +### Conditional formatting based on the value in a text or choice field |
| 36 | + |
| 37 | +## Build custom row layouts |
| 38 | +You can use view formatting to define a totally custom layout of field values inside a row. |
| 39 | + |
| 40 | +### Multi-line view |
| 41 | + |
| 42 | +### Multi-line view with an image |
| 43 | + |
| 44 | +## Creating custom JSON |
| 45 | + |
| 46 | +Creating custom view formatting JSON from scratch is simple if you understand the schema. To create your own custom column formatting: |
| 47 | + |
| 48 | +1. [Download Visual Studio Code](https://code.visualstudio.com/Download). It's free and fast to download. |
| 49 | + |
| 50 | +2. In Visual Studio Code, create a new file, and save the empty file with a .json file extension. |
| 51 | + |
| 52 | +3. Paste the following lines of code into your empty file. |
| 53 | + |
| 54 | + ```JSON |
| 55 | + { |
| 56 | + "$schema": "http://listformatting.sharepointpnp.com/viewFormattingSchema.json" |
| 57 | + } |
| 58 | + ``` |
| 59 | + |
| 60 | + You now have validation and autocomplete to create your JSON. You can start adding your JSON after the first line that defines the schema ___location. |
| 61 | + |
| 62 | +> [!TIP] |
| 63 | +> At any point, select **Ctrl**+**Space** to have Visual Studio Code offer suggestions for properties and values. For more information, see [Editing JSON with Visual Studio Code](https://code.visualstudio.com/Docs/languages/json). |
| 64 | + |
| 65 | +## Detailed syntax reference |
| 66 | + |
| 67 | +### hideColumnHeader |
| 68 | + |
| 69 | +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. |
| 70 | + |
| 71 | +### hideSelection |
| 72 | + |
| 73 | +Optional element. Specifies whether the ability to select rows in the view is diabled or not. *false* is the default behavior inside a list view. *true* means that users will not be able to select list items. |
| 74 | + |
| 75 | +### additionalRowClass |
| 76 | + |
| 77 | +Optional element. Specifies a CSS class that is applied to the row. |
| 78 | + |
| 79 | +### rowFormatter |
| 80 | + |
| 81 | +Optional element. Specifies a JSON object that describes a view format. The schema of this JSON object is identical to the schema of a column format. For details on this schema and its capabilities, see the [Column Format detailex syntax reference.](https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/column-formatting.md#detailed-syntax-reference) |
| 82 | + |
| 83 | + |
0 commit comments