Skip to content

Commit 1bb832e

Browse files
shagra-msandrewconnell
shagra-ms
and
andrewconnell
authored
Lists formatting documentation - restructure (SharePoint#7409)
* Copy files and add entry in TOC * Move sections from column formatting * Fix detailed syntax reference * Fix formatting advanced * Fix issue 7177 * Move sections from view formatting * Fix list layout formatting * Fix doc - allow hideSelection without formatter * Fix gallery layout formatting * Fix group formatting detailed syntax reference * Fix section links * Add 'See also' section * Update ms.date * Reorder TOC * Fix broken links warning * Fix broken bookmark warning * Fix TOC * Fix images layout * fix markdown issues * fix markdown issues * Fixing names Co-authored-by: Andrew Connell <[email protected]>
1 parent 9b431cc commit 1bb832e

File tree

8 files changed

+2224
-2131
lines changed

8 files changed

+2224
-2131
lines changed

‎docs/declarative-customization/column-formatting.md

Lines changed: 7 additions & 1235 deletions
Large diffs are not rendered by default.

‎docs/declarative-customization/formatting-advanced.md

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
---
2+
title: Advanced formatting concepts
3+
description: Advanced formatting concepts
4+
ms.date: 10/18/2021
5+
ms.localizationpriority: high
6+
---
7+
# Advanced formatting concepts
8+
9+
You can use some of the following features to make your view and column formatting more information rich and interactable.
10+
11+
## Create a button to launch a Flow
12+
13+
The following screenshot shows a list with a Flow button added to the Action column:
14+
15+
![screenshot of the sample](../images/sp-columnformatting-flow.png)
16+
17+
You can use formatting to create buttons that, when selected, run Flows on the corresponding list item. The Flow Launch Panel will be displayed after choosing the button and the Flow will just run.
18+
19+
To use the sample below, you must substitute the ID of the Flow you want to run. This ID is contained within the `customRowAction` attribute inside the `button` element. To obtain a Flow's ID:
20+
21+
1. Choose Flow > See your flows in the SharePoint list where the Flow is configured.
22+
2. Choose the Flow you want to run.
23+
3. Copy the ID from the end of the URL.
24+
25+
```JSON
26+
{
27+
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
28+
"elmType": "button",
29+
"customRowAction": {
30+
"action": "executeFlow",
31+
"actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
32+
},
33+
"attributes": {
34+
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
35+
},
36+
"style": {
37+
"border": "none",
38+
"background-color": "transparent",
39+
"cursor": "pointer"
40+
},
41+
"children": [
42+
{
43+
"elmType": "span",
44+
"attributes": {
45+
"iconName": "Flow"
46+
},
47+
"style": {
48+
"padding-right": "6px"
49+
}
50+
},
51+
{
52+
"elmType": "span",
53+
"txtContent": "Send to Manager"
54+
}
55+
]
56+
}
57+
```
58+
59+
Additionally, you can use `headerText` and `runFlowButtonText` options within the `actionParams` property to customize portions of the Flow panel itself! See the [button elements](./formatting-syntax-reference.md#customrowaction) portion of the Detailed syntax reference for more details.
60+
## Custom cards on hover
61+
62+
The following image shows a list with a custom hover added to a List:
63+
64+
On hover - Metadata on the column "Status" is made available in view formatting
65+
66+
![Preview Image 1](../images/HoverImage-1.png)
67+
68+
On hover - Metadata on the column "Status" is made available in column formatting
69+
70+
![Preview Image 2](../images/HoverImage-2.png)
71+
72+
73+
74+
You can use formatting to define custom call out that can be commissioned basis user defined actions like click or hover
75+
76+
This example uses customCardProps, openOnEvent, directionalHint and isBeakVisible
77+
78+
```JSON
79+
{
80+
"elmType": "div",
81+
"style": {
82+
"font-size": "12px"
83+
},
84+
"txtContent": "[$Status]",
85+
"customCardProps": {
86+
"formatter": {
87+
"elmType": "div",
88+
"txtContent": "Define your formatter options inside the customCarProps/formatter property"
89+
},
90+
"openOnEvent": "hover",
91+
"directionalHint": "bottomCenter",
92+
"isBeakVisible": true,
93+
"beakStyle" : {
94+
"backgroundColor": "white"
95+
}
96+
}
97+
}
98+
```
99+
100+
## Default cards on hover
101+
102+
Users can now have profile card or file hover card on formatters too, some of the things users can now do -
103+
1) Profile card or File Hover card on any column
104+
2) Profile card or Hover card with view formatting
105+
106+
Hover on a filename with formatting with default file card
107+
108+
![Preview Image 3](../images/HoverImage-3.png)
109+
110+
111+
Hover on a person column with formatting with default Profile card
112+
113+
![Preview Image 4](../images/HoverImage-4.png)
114+
115+
Both the example uses defaultHoverField
116+
117+
```JSON
118+
{
119+
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
120+
"elmType": "div",
121+
"children": [
122+
{
123+
"elmType": "img",
124+
"style": {
125+
"width": "32px",
126+
"height": "32px",
127+
"overflow": "hidden",
128+
"border-radius": "50%",
129+
"margin": "2px"
130+
},
131+
"attributes": {
132+
"src": "='getUserImage([$Editor.email], 's')",
133+
"title": "[$Editor.title]"
134+
}
135+
},
136+
{
137+
"elmType": "span",
138+
"style": {
139+
"vertical-align": "middle",
140+
"margin-left": "2px"
141+
},
142+
"txtContent": "[$Editor.title]"
143+
}
144+
],
145+
"defaultHoverField": "[$Editor]"
146+
}
147+
```
148+
149+
## Column formatter reference
150+
151+
Users can refer to a column's formatter JSON inside another column/view formatter and use it along with other elements to build a custom column visualization. This can be done by using `columnFormatterReference` property.
152+
153+
The following image shows a list with a Gallery layout referencing the Category column formatter:
154+
155+
![Gallery layout referring Category column](../images/sp-columnformatting-formatter-reference-1.png)
156+
157+
![List layout with Category column formatted](../images/sp-columnformatting-formatter-reference-2.png)
158+
159+
``` JSON
160+
{
161+
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
162+
"height": 127,
163+
"width": 254,
164+
"hideSelection": false,
165+
"formatter": {
166+
"elmType": "div",
167+
"attributes": {
168+
"class": "sp-card-container"
169+
},
170+
"children": [
171+
{
172+
"elmType": "button",
173+
"attributes": {
174+
"class": "sp-card-defaultClickButton"
175+
},
176+
"customRowAction": {
177+
"action": "defaultClick"
178+
}
179+
},
180+
{
181+
"elmType": "div",
182+
"attributes": {
183+
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
184+
},
185+
"children": [
186+
{
187+
"elmType": "div",
188+
"attributes": {
189+
"class": "sp-card-displayColumnContainer"
190+
},
191+
"children": [
192+
{
193+
"elmType": "p",
194+
"attributes": {
195+
"class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
196+
},
197+
"txtContent": "[!Title.DisplayName]"
198+
},
199+
{
200+
"elmType": "p",
201+
"attributes": {
202+
"title": "[$Title]",
203+
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
204+
},
205+
"txtContent": "=if ([$Title] == '', '–', [$Title])"
206+
}
207+
]
208+
},
209+
{
210+
"elmType": "div",
211+
"attributes": {
212+
"class": "sp-card-lastTextColumnContainer"
213+
},
214+
"children": [
215+
{
216+
"elmType": "p",
217+
"attributes": {
218+
"class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
219+
},
220+
"txtContent": "[!Category.DisplayName]"
221+
},
222+
{
223+
"elmType": "div",
224+
"attributes": {
225+
"class": "sp-card-content"
226+
},
227+
"style": {
228+
"height": "32px",
229+
"font-size":"12px"
230+
},
231+
"children": [
232+
{
233+
"columnFormatterReference": "[$Category]"
234+
}
235+
]
236+
}
237+
]
238+
}
239+
]
240+
}
241+
]
242+
}
243+
}
244+
```

0 commit comments

Comments
 (0)