Skip to content

Commit 2f4540d

Browse files
privatemakerprivatemaker
authored
Update Docs: migrate Beta Features - List Widget: Variable Types (#7053)
* Update Docs: migrate Beta Features - List Widget: Variable Types * Update Docs: make page Variable Type Widgets
1 parent dffeaea commit 2f4540d

File tree

2 files changed

+83
-90
lines changed

2 files changed

+83
-90
lines changed

‎website/content/docs/beta-features.md

-90
Original file line numberDiff line numberDiff line change
@@ -9,96 +9,6 @@ We run new functionality in an open beta format from time to time. That means th
99

1010

1111

12-
13-
14-
15-
16-
## List Widget: Variable Types
17-
18-
Before this feature, the [list widget](/docs/widgets/#list) allowed a set of fields to be repeated, but every list item had the same set of fields available. With variable types, multiple named sets of fields can be defined, which opens the door to highly flexible content authoring (even page building) in Decap CMS.
19-
20-
**Note: this feature does not yet support default previews and requires [registering a preview template](/docs/customization#registerpreviewtemplate) in order to show up in the preview pane.**
21-
22-
To use variable types in the list widget, update your field configuration as follows:
23-
24-
1. Instead of defining your list fields under `fields` or `field`, define them under `types`. Similar to `fields`, `types` must be an array of field definition objects.
25-
2. Each field definition under `types` must use the `object` widget (this is the default value for
26-
`widget`).
27-
28-
### Additional list widget options
29-
30-
* `types`: a nested list of object widgets. All widgets must be of type `object`. Every object widget may define different set of fields.
31-
* `typeKey`: the name of the field that will be added to every item in list representing the name of the object widget that item belongs to. Ignored if `types` is not defined. Default is `type`.
32-
* `summary`: allows customization of a collapsed list item object in a similar way to a [collection summary](/docs/configuration-options/?#summary)
33-
34-
### Example Configuration
35-
36-
The example configuration below imagines a scenario where the editor can add two "types" of content,
37-
either a "carousel" or a "spotlight". Each type has a unique name and set of fields.
38-
39-
```yaml
40-
- label: 'Home Section'
41-
name: 'sections'
42-
widget: 'list'
43-
types:
44-
- label: 'Carousel'
45-
name: 'carousel'
46-
widget: object
47-
summary: '{{fields.header}}'
48-
fields:
49-
- { label: Header, name: header, widget: string, default: 'Image Gallery' }
50-
- { label: Template, name: template, widget: string, default: 'carousel.html' }
51-
- label: Images
52-
name: images
53-
widget: list
54-
field: { label: Image, name: image, widget: image }
55-
- label: 'Spotlight'
56-
name: 'spotlight'
57-
widget: object
58-
fields:
59-
- { label: Header, name: header, widget: string, default: 'Spotlight' }
60-
- { label: Template, name: template, widget: string, default: 'spotlight.html' }
61-
- { label: Text, name: text, widget: text, default: 'Hello World' }
62-
```
63-
64-
### Example Output
65-
66-
The output for the list widget will be an array of objects, and each object will have a `type` key
67-
with the name of the type used for the list item. The `type` key name can be customized via the
68-
`typeKey` property in the list configuration.
69-
70-
If the above example configuration were used to create a carousel, a spotlight, and another
71-
carousel, the output could look like this:
72-
73-
```yaml
74-
title: Home
75-
sections:
76-
- type: carousel
77-
header: Image Gallery
78-
template: carousel.html
79-
images:
80-
- images/image01.png
81-
- images/image02.png
82-
- images/image03.png
83-
- type: spotlight
84-
header: Spotlight
85-
template: spotlight.html
86-
text: Hello World
87-
- type: carousel
88-
header: Image Gallery
89-
template: carousel.html
90-
images:
91-
- images/image04.png
92-
- images/image05.png
93-
- images/image06.png
94-
```
95-
96-
97-
98-
99-
100-
101-
10212
## Summary string template transformations
10313

10414
You can apply transformations on fields in a summary string template using filter notation syntax.

‎website/content/docs/variable-type-widgets.md

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
label: "Variable Type Widgets"
3+
group: Fields
4+
weight: 30
5+
---
6+
7+
Before this feature, the [list widget](/docs/widgets/#list) allowed a set of fields to be repeated, but every list item had the same set of fields available. With variable types, multiple named sets of fields can be defined, which opens the door to highly flexible content authoring (even page building) in Decap CMS.
8+
9+
**Note: this feature does not yet support default previews and requires [registering a preview template](/docs/customization#registerpreviewtemplate) in order to show up in the preview pane.**
10+
11+
To use variable types in the list widget, update your field configuration as follows:
12+
13+
1. Instead of defining your list fields under `fields` or `field`, define them under `types`. Similar to `fields`, `types` must be an array of field definition objects.
14+
2. Each field definition under `types` must use the `object` widget (this is the default value for
15+
`widget`).
16+
17+
### Additional list widget options
18+
19+
* `types`: a nested list of object widgets. All widgets must be of type `object`. Every object widget may define different set of fields.
20+
* `typeKey`: the name of the field that will be added to every item in list representing the name of the object widget that item belongs to. Ignored if `types` is not defined. Default is `type`.
21+
* `summary`: allows customization of a collapsed list item object in a similar way to a [collection summary](/docs/configuration-options/?#summary)
22+
23+
### Example Configuration
24+
25+
The example configuration below imagines a scenario where the editor can add two "types" of content,
26+
either a "carousel" or a "spotlight". Each type has a unique name and set of fields.
27+
28+
```yaml
29+
- label: 'Home Section'
30+
name: 'sections'
31+
widget: 'list'
32+
types:
33+
- label: 'Carousel'
34+
name: 'carousel'
35+
widget: object
36+
summary: '{{fields.header}}'
37+
fields:
38+
- { label: Header, name: header, widget: string, default: 'Image Gallery' }
39+
- { label: Template, name: template, widget: string, default: 'carousel.html' }
40+
- label: Images
41+
name: images
42+
widget: list
43+
field: { label: Image, name: image, widget: image }
44+
- label: 'Spotlight'
45+
name: 'spotlight'
46+
widget: object
47+
fields:
48+
- { label: Header, name: header, widget: string, default: 'Spotlight' }
49+
- { label: Template, name: template, widget: string, default: 'spotlight.html' }
50+
- { label: Text, name: text, widget: text, default: 'Hello World' }
51+
```
52+
53+
### Example Output
54+
55+
The output for the list widget will be an array of objects, and each object will have a `type` key
56+
with the name of the type used for the list item. The `type` key name can be customized via the
57+
`typeKey` property in the list configuration.
58+
59+
If the above example configuration were used to create a carousel, a spotlight, and another
60+
carousel, the output could look like this:
61+
62+
```yaml
63+
title: Home
64+
sections:
65+
- type: carousel
66+
header: Image Gallery
67+
template: carousel.html
68+
images:
69+
- images/image01.png
70+
- images/image02.png
71+
- images/image03.png
72+
- type: spotlight
73+
header: Spotlight
74+
template: spotlight.html
75+
text: Hello World
76+
- type: carousel
77+
header: Image Gallery
78+
template: carousel.html
79+
images:
80+
- images/image04.png
81+
- images/image05.png
82+
- images/image06.png
83+
```

0 commit comments

Comments
 (0)