Skip to content

Commit 75cf7f6

Browse files
rk-menonrk-menon
committed
Added documentation around tileProps
1 parent cfb6fda commit 75cf7f6

File tree

3 files changed

+94
-83
lines changed

3 files changed

+94
-83
lines changed

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

Lines changed: 94 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,18 @@ You can use view formatting to customize how views in SharePoint lists and libra
1212
> [!TIP]
1313
> Samples demonstrated in this article and numerous other community samples are available from a GitHub repository dedicated for open-sourced list formatting definitions. You can find these samples in the [sp-dev-list-formatting](https://github.com/SharePoint/sp-dev-list-formatting) repository within the [SharePoint](https://github.com/SharePoint) GitHub organization.
1414
15+
>[!NOTE]
16+
> View formatting is currently supported only in SharePoint Online.
17+
1518
## Get started with view formatting
1619

1720
To open the view formatting pane, open the view dropdown and choose **Format current view**.
1821
![view dropdown options](../images/view-dropdown-menu.png)
1922

2023
>[!NOTE]
21-
> To enbale the 'Tiles' layout, include tileProps property inside the JSON.
24+
> To enbale the 'Tile' layout, include `tileProps` property inside the JSON.
2225
23-
To format rows in 'List' or 'Compact List' layout, use the `rowFormatter` or `additionalRowClass` properties. To format entries in 'Tiles' layout, use the `formatter` within `tileProps` property.
26+
To format rows in 'List' or 'Compact List' layout, use the `rowFormatter` or `additionalRowClass` properties. To format entries in 'Tile' layout, use the `formatter` within `tileProps` property.
2427

2528

2629
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).
@@ -138,99 +141,107 @@ This example uses the `rowFormatter` element, which totally overrides the render
138141
You can find this sample with additional details here: [Multi-line view rendering](https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/multi-line-view)
139142

140143

141-
Similarly, to get the below format in ‘Tiles’ layout for the Feedback list, define the formatter within tileProps:
142-
![Feedback list formatted in Tiles layout](../images/feedback-tile-layout.png)
144+
Similarly, to get the below format in ‘Tile’ layout for the Feedback list, define the formatter within `tileProps`:
145+
![Feedback list formatted in Tile layout](../images/feedback-tile-layout.png)
143146

144147
```JSON
145148
{
146-
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
147-
"tileProps": {
148-
"height": "250",
149-
"width": "350",
150-
"hideSelection": true,
151-
"formatter": {
152-
"elmType": "div",
153-
"style": {
154-
"display": "flex",
155-
"align-items": "stretch",
156-
"margin-bottom": "16px",
157-
"min-width": "150px",
158-
"flex-grow": "1",
159-
"justify-content": "space-around",
160-
"padding": "8px"
161-
},
162-
"children": [
149+
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
150+
"tileProps": {
151+
"height": "250",
152+
"width": "350",
153+
"hideSelection": true,
154+
"formatter": {
155+
"elmType": "div",
156+
"style": {
157+
"display": "flex",
158+
"align-items": "stretch",
159+
"margin-bottom": "16px",
160+
"min-width": "150px",
161+
"flex-grow": "1",
162+
"justify-content": "space-around",
163+
"padding": "5px"
164+
},
165+
"children": [
166+
{
167+
"elmType": "div",
168+
"style": {
169+
"width": "95%",
170+
"height": "92%",
171+
"box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
172+
"overflow": "hidden",
173+
"border-radius": "2px",
174+
"padding-left": "16px",
175+
"padding-top": "16px"
176+
},
177+
"attributes": {
178+
"class": "ms-bgColor-neutralLighterAlt"
179+
},
180+
"children": [
163181
{
164-
"elmType": "div",
165-
"style": {
166-
"width": "97%",
167-
"height": "97%",
168-
"box-shadow": "4px 4px 8px #a9a9a985",
169-
"overflow": "hidden",
170-
"border-radius": "4px",
171-
"padding-left": "12px"
172-
},
173-
"attributes": {
174-
"class": "ms-bgColor-neutralLighter"
175-
},
176-
"children": [
182+
"elmType": "div",
183+
"style": {
184+
"text-align": "left"
185+
},
186+
"children": [
177187
{
178-
"elmType": "div",
179-
"style": {
180-
"text-align": "left"
188+
"elmType": "div",
189+
"style": {
190+
"color":"#333333",
191+
"font-size": "16px",
192+
"font-weight":"600",
193+
"margin-bottom":"5px"
181194
},
182-
"children": [
183-
{
184-
"elmType": "div",
185-
"attributes": {
186-
"class": "sp-row-title"
187-
},
188-
"txtContent": "[$Title]"
189-
},
190-
{
191-
"elmType": "div",
192-
"attributes": {
193-
"class": "sp-row-listPadding"
194-
},
195-
"txtContent": "[$Feedback]"
196-
},
197-
{
198-
"elmType": "button",
199-
"customRowAction": {
200-
"action": "defaultClick"
201-
},
202-
"txtContent": "Give feedback",
203-
"attributes": {
204-
"class": "sp-row-button"
205-
},
206-
"style": {
207-
"display": {
208-
"operator": "?",
209-
"operands": [
210-
{
211-
"operator": "==",
212-
"operands": [
213-
"@me",
214-
"[$Assigned_x0020_To.email]"
215-
]
216-
},
217-
"",
218-
"none"
219-
]
220-
}
221-
}
195+
"txtContent": "[$Title]"
196+
},
197+
{
198+
"elmType": "div",
199+
"style": {
200+
"color":"#333333",
201+
"font-size": "14px",
202+
"line-height":"1.8"
203+
},
204+
"attributes": {
205+
"class": "sp-row-listPadding"
206+
},
207+
"txtContent": "[$Feedback]"
208+
},
209+
{
210+
"elmType": "button",
211+
"customRowAction": {
212+
"action": "defaultClick"
213+
},
214+
"txtContent": "Give feedback",
215+
"attributes": {
216+
"class": "sp-row-button"
217+
},
218+
"style": {
219+
"display": {
220+
"operator": "?",
221+
"operands": [
222+
{
223+
"operator": "==",
224+
"operands": [
225+
"@me",
226+
"[$Assigned_x0020_To.email]"
227+
]
228+
},
229+
"",
230+
"none"
231+
]
222232
}
223-
]
233+
}
224234
}
225-
]
235+
]
226236
}
227-
]
237+
]
228238
}
239+
]
229240
}
241+
}
230242
}
231243

232244

233-
234245
### Alternate Row Formatting based on Modulus
235246

236247
This example applies `% (Mod)` to a list view row with alternate coloring the rows:
@@ -288,15 +299,15 @@ Optional element. Specifies a CSS class(es) that is applied to the entire row. S
288299

289300
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.
290301

291-
For list & compact list layout, `hideSelection` only takes effect when there's a `rowFormatter` element specified. If no `rowFormatter` is specified, then `hideSelection` is ignored. For tile layout, `hideSelection` will only take effect if defined inside `tileProps` properties.
302+
For list & compact list layout, `hideSelection` only takes effect when there's a `rowFormatter` element specified. If no `rowFormatter` is specified, then `hideSelection` is ignored. For 'Tile' layout, `hideSelection` will only take effect if defined inside `tileProps` properties.
292303

293304
### hideColumnHeader
294305

295306
Optional element. Specifies whether the column headers in the view are hidden or not. *false* is the default behavior inside a list view (meaning column headers will be visible). *true* means that the view will not display column headers.
296307

297308
### tileProps
298309

299-
Optional element. Specifies a JSON object that describes a tile view format. Elements of this property include:
310+
Optional element. Specifies a JSON object that describes a 'Tile' view format. Elements of this property include:
300311
- height – defines the height of the card in pixels.
301312
- width – defines the width of the card in pixels. Can go from height/2 to 3 x height.
302313
- hideSelection – as defined above

‎docs/images/feedback-tile-layout.png

39.3 KB
Loading

‎docs/images/view-dropdown-menu.png

-7.06 KB
Loading

0 commit comments

Comments
 (0)