Skip to content

Commit 8125ed1

Browse files
committed
2 parents 6a3b106 + da92f66 commit 8125ed1

22 files changed

+339
-360
lines changed

docs/declarative-customization/column-formatting.md

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Use column formatting to customize SharePoint
33
description: Customize how fields in SharePoint lists and libraries are displayed by constructing 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.
4-
ms.date: 08/21/2019
4+
ms.date: 10/26/2020
55
localization_priority: Priority
66
---
77

@@ -826,11 +826,11 @@ The following column types support column formatting:
826826
* Choice
827827
* ContentType
828828
* Counter (ID)
829-
* Currency*
829+
* Currency
830830
* Date/Time
831831
* Hyperlink
832832
* Image
833-
* Location*
833+
* Location
834834
* Lookup
835835
* Multi-Choice
836836
* Multi-Line Text
@@ -842,8 +842,6 @@ The following column types support column formatting:
842842
* Title (in Lists)
843843
* Yes/No
844844

845-
_* Formats for these column types can only be applied through Field Settings_
846-
847845
The following are currently **not** supported:
848846

849847
* Managed Metadata
@@ -924,7 +922,7 @@ Any other value will result in an error.
924922

925923
`Button` elements can be used to launch a specific action on the parent item. Every `button` element has a required property, `customRowAction`, that specifies an `action` that's taken when the button is clicked. This action must be one of the following values:
926924

927-
- **defaultClick**: buttons with this action will do the same thing as clicking the list item in an uncustomized view. Below is an example of a button that, when clicked, simulates a click on the item, which results in the details pane being opened.
925+
- **defaultClick**: buttons with this action will do the same thing as clicking the list item in an uncustomized view. Below is an example of a button that, when clicked, simulates a click on the item, which results in opening the file.
928926

929927
```JSON
930928
{
@@ -1184,6 +1182,8 @@ An optional property that specifies additional attributes to add to the element
11841182
- d
11851183
- aria
11861184
- data-interception
1185+
- viewBox
1186+
- preserveAspectRatio
11871187

11881188
Any other attribute name will result in an error. Attribute values can either be Expression objects or strings. The following example adds two attributes (`target` and `href`) to the element specified by `elmType`. The `target` attribute is hard-coded to a string. The `href` attribute is an expression that will be evaluated at runtime to http://finance.yahoo.com/quote/ + the value of the current field (`@currentField`).
11891189

@@ -1688,12 +1688,53 @@ The following example shows how a hyperlink field might be used on a current fie
16881688
}
16891689
```
16901690

1691+
**Image fields**
1692+
1693+
The image field object has the following properties (with example values):
1694+
1695+
```JSON
1696+
{
1697+
"fileName": "image.png",
1698+
"id": "6bb1d843-0633-4c9a-9a16-90bc5abd1d8e",
1699+
"serverRelativeUrl": "/teams/Discovery/SiteAssets/Lists/ad6ed939-0db2-4d85-8a39-8f3497f41eee/image.png",
1700+
"serverUrl": "https://contoso.sharepoint.com"
1701+
}
1702+
1703+
```
1704+
1705+
<br/>
1706+
1707+
The following example shows how an image field can be used on a current field.
1708+
1709+
```JSON
1710+
{
1711+
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
1712+
"elmType": "img",
1713+
"attributes": {
1714+
"src": "@currentField.serverRelativeUrl",
1715+
"alt": "@currentField.fileName"
1716+
},
1717+
"style": {
1718+
"width": "100%",
1719+
"max-width": "100%"
1720+
}
1721+
}
1722+
```
1723+
1724+
16911725
#### "[$FieldName]"
16921726

16931727
The column is formatted within the context of the entire row. You can use this context to reference the values of other fields within the same row by specifying the **internal name** of the field surrounded by square brackets and preceded by a dollar sign: `[$InternalName]`. For example, to get the value of a field with an internal name of "MarchSales", use `[$MarchSales]`.
16941728

16951729
If the value of a field is an object, the object's properties can be accessed. For example, to access the "Title" property of a person field named "SalesLead", use "[$SalesLead.title]".
16961730

1731+
#### "[!FieldName]"
1732+
1733+
In column and view formatting, you can refer to any field's metadata by specifying the **internal name** of the field surrounded by square brackets and preceded by a exclamation mark: `[!InternalName]`.
1734+
1735+
Currently field's display name is available in this metadata, and can be accessed using DisplayName property: `[!SalesLead.DisplayName]`.
1736+
1737+
16971738
#### "@currentWeb"
16981739

16991740
This will evaluate to the absolute URL for the site. This is equivalent to the `webAbsoluteUrl` value within the page context. This value is only available in SharePoint Online.
@@ -1819,6 +1860,7 @@ The following column types can use displayValue property to get the default rend
18191860
* Date/Time
18201861
* Number
18211862
* Yes/No
1863+
* Currency
18221864

18231865
```JSON
18241866
{
-693 Bytes
Loading
-742 Bytes
Loading
Loading
-17.9 KB
Loading
-4.01 KB
Loading
-4.06 KB
Loading
-37.2 KB
Loading
-2.01 KB
Loading
-126 Bytes
Loading

0 commit comments

Comments
 (0)