Formatting docs update (SharePoint#7707)

* Add docs for getThumbnailImage operator

* Add docs for board view

* Update ms.date

* Fix typo

Author: shagra-ms

docs/declarative-customization/formatting-syntax-reference.md

@@ -1,7 +1,7 @@
 ---
 title: Formatting syntax reference
 description: Formatting syntax reference
-ms.date: 01/06/2022
+ms.date: 02/09/2022
 ms.localizationpriority: high
 ---
 
@@ -635,6 +635,8 @@ Operators specify the type of operation to perform. The following operators are
   - `"txtContent":"=padEnd('DogFood', 10, 'A')"` results in _DogFoodAAA_
   - `"txtContent":"=padEnd('DogFood', 10, 'AB')"` results in _DogFoodABA_
   - `"txtContent":"=padEnd('DogFood', 5, 'A')"` results in _DogFood_
+- **getThumbnailImage**: returns a URL pointing to image for a given image field and preferred size.
+  - `"src":"=getThumbnailImage([$ImageField], 400, 200)"` results in a URL pointing to image for a given image field with 400 width and 200 height
 
 **Conditional operator** - The conditional operator is:
 
@@ -864,7 +866,12 @@ The image field object has the following properties (with example values):
   "fileName": "image.png",
   "id": "6bb1d843-0633-4c9a-9a16-90bc5abd1d8e",
   "serverRelativeUrl": "/teams/Discovery/SiteAssets/Lists/ad6ed939-0db2-4d85-8a39-8f3497f41eee/image.png",
-  "serverUrl": "https://contoso.sharepoint.com"
+  "serverUrl": "https://contoso.sharepoint.com",
+  "thumbnailRenderer": {
+        "spItemUrl": "https://contoso.sharepoint.com:443/_api/v2.1/drives/b!7196759210defdc0/items/2303b15bfa48c74a74758135a0df1201",
+        "fileVersion": 3,
+        "sponsorToken": "3u+UR6n8AgABAAAAHxxdXKmiOmUoqKnZlf8lTOhlPYy93EAkbPfs5+49YLFd/B1+omSKbW7DoqNM40/EeVnwJ8kYoXv9zy9D5C5m5A=="
+      }
 }
 ```
 
@@ -875,7 +882,7 @@ The following example shows how an image field can be used on a current field.
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "img",
   "attributes": {
-    "src": "@currentField.serverRelativeUrl",
+    "src": "=getThumbnailImage(@currentField, 400, 300)",
     "alt": "@currentField.fileName"
   },
   "style": {

docs/declarative-customization/view-board-formatting.md

@@ -0,0 +1,26 @@
+---
+title: Format board view to customize SharePoint
+description: Customize how board views in SharePoint lists and libraries are displayed by constructing a JSON object that describes the elements and the styles to be applied to those elements.
+ms.date: 02/09/2022
+ms.localizationpriority: high
+---
+
+# Board view customizations
+
+## Build custom cards
+
+You can use Board **`formatter`** to define a totally custom layout of field values inside a card using the same syntax used in [Column Formatting](column-formatting.md).
+
+## Detailed syntax reference
+
+### hideSelection
+
+Optional element. Specifies whether the ability to select cards in the view is disabled or not. `false` is the default behavior inside a board view (meaning selection is visible and enabled). `true` means that users will not be able to select list items.
+
+### formatter
+
+JSON object that defines the layout of cards. The schema of this JSON object is identical to the schema of a column format (and that of rowFormatter). For details on this schema and its capabilities, see the [Formatting syntax reference](./formatting-syntax-reference.md).
+
+## See also
+- [Advanced formatting concepts](./formatting-advanced.md)
+- [Formatting syntax reference](./formatting-syntax-reference.md)

docs/declarative-customization/view-formatting.md

@@ -1,7 +1,7 @@
 ---
 title: Use view formatting to customize SharePoint
 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.
-ms.date: 10/18/2021
+ms.date: 02/09/2022
 ms.localizationpriority: high
 ---
 
@@ -26,9 +26,9 @@ The pane will look like the following depending on the current layout:
 ![List layout formatting pane](../images/sp-viewformatting-panel-listlayout.png)  ![Gallery layout formatting pane](../images/sp-viewformatting-panel-tileslayout.png)
 
 > [!NOTE]
-> We have simplified the View formatting pane experience to separate out the List and Gallery layout formatting JSON. With this change, you do not need to add `tileProps` prop anymore.
+> We have simplified the View formatting pane experience to separate out layout specific formatting JSON. With this change, you do not need to add layout specific props like `tileProps` anymore.
 
-To format rows in 'List' or 'Compact List' layout, select 'List' in 'Choose layout' dropdown in the formatting pane and use the `rowFormatter` or `additionalRowClass` properties. To format cards in 'Gallery' layout, select 'Gallery' in 'Choose layout' dropdown in the formatting pane and use the `formatter` property.
+To format rows in 'List' or 'Compact List' layout, select 'List' in 'Choose layout' dropdown in the formatting pane and use the `rowFormatter` or `additionalRowClass` properties. To format cards in 'Gallery' layout, select 'Gallery' in 'Choose layout' dropdown in the formatting pane and use the `formatter` property. To format cards in 'Board' view just use the `formatter` property.
 
 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 customize for your specific needs. There are also several samples available in the [SharePoint/sp-dev-list-formatting repository](https://github.com/SharePoint/sp-dev-list-formatting).
 
@@ -45,6 +45,7 @@ Creating custom view formatting JSON from scratch is simple if user understands
 ## See also
 - [List layout customization](./view-list-formatting.md)
 - [Gallery layout customization](./view-gallery-formatting.md)
+- [Board view customization](./view-gallery-formatting.md)
 - [Group customization syntax reference](./view-group-formatting.md)
 - [Advanced formatting concepts](./formatting-advanced.md)
 - [Formatting syntax reference](./formatting-syntax-reference.md)

docs/declarative-customization/view-gallery-formatting.md

@@ -1,7 +1,7 @@
 ---
 title: Format gallery view to customize SharePoint
 description: Customize how gallery views in SharePoint lists and libraries are displayed by constructing a JSON object that describes the elements and the styles to be applied to those elements.
-ms.date: 10/18/2021
+ms.date: 02/09/2022
 ms.localizationpriority: high
 ---
 
@@ -334,8 +334,7 @@ In this example the `@aggregates` array is used to display a summary in the grou
 
 ### hideSelection
 
-Optional element. Specifies whether the ability to select rows in the view is disabled or not. `false` is the default behavior inside a list view (meaning selection is visible and enabled). `true` means that users will not be able to select list items.
-
+Optional element. Specifies whether the ability to select cards in the view is disabled or not. `false` is the default behavior inside a gallery view (meaning selection is visible and enabled). `true` means that users will not be able to select list items.
 ### fillHorizontally
 
 Optional element. Specifies whether the cards in the row should be stretched horizontally to fill the row. `false` is the default behavior (meaning cards in a row are stacked without resizing until they overflow). `true` means cards in the row are stretched horizontally only if necessary to fill the row.

docs/toc.yml

@@ -91,6 +91,8 @@
         href: declarative-customization/view-list-formatting.md
       - name: Gallery layout customization
         href: declarative-customization/view-gallery-formatting.md
+      - name: Board view customization
+        href: declarative-customization/view-board-formatting.md
       - name: Group customization syntax reference
         href: declarative-customization/view-group-formatting.md
     - name: Forms configuration