Skip to content

Commit

Permalink
move docs to beta features section
Browse files Browse the repository at this point in the history
  • Loading branch information
erquhart committed Dec 27, 2018
1 parent 4d945b0 commit 3ed0efe
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 53 deletions.
78 changes: 78 additions & 0 deletions website/content/docs/beta-features.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,84 @@ We run new functionality in an open beta format from time to time. That means th

**Use these features at your own risk.**

## List Widget: Variable Types
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 Netlify CMS.

**Note: this feature does not yet support previews, and will not output anything in the preview
pane.**

To use variable types in the list widget, update your field configuration as follows:

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.
2. Each field definition under `types` must use the `object` widget (this is the default value for
`widget`).

### Additional list widget options

- `types`: a nested list of object widgets. All widgets must be of type `object`. Every object widget may define different set of fields.
- `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`.

### Example Configuration

The example configuration below imagines a scenario where the editor can add two "types" of content,
either a "carousel" or a "spotlight". Each type has a unique name and set of fields.

```yaml
- label: "Home Section"
name: "sections"
widget: "list"
types:
- label: "Carousel"
name: "carousel"
widget: object
fields:
- {label: Header, name: header, widget: string, default: "Image Gallery"}
- {label: Template, name: template, widget: string, default: "carousel.html"}
- label: Images
name: images
widget: list
field: {label: Image, name: image, widget: image}
- label: "Spotlight"
name: "spotlight"
widget: object
fields:
- {label: Header, name: header, widget: string, default: "Spotlight"}
- {label: Template, name: template, widget: string, default: "spotlight.html"}
- {label: Text, name: text, widget: text, default: "Hello World"}
```
### Example Output
The output for the list widget will be an array of objects, and each object will have a `type` key
with the name of the type used for the list item. The `type` key name can be customized via the
`typeKey` property in the list configuration.

If the above example configuration were used to create a carousel, a spotlight, and another
carousel, the output could look like this:

```yaml
title: Home
sections:
- type: carousel
header: Image Gallery
template: carousel.html
images:
- images/image01.png
- images/image02.png
- images/image03.png
- type: spotlight
header: Spotlight
template: spotlight.html
text: Hello World
- type: carousel
header: Image Gallery
template: carousel.html
images:
- images/image04.png
- images/image05.png
- images/image06.png
```

## Custom Mount Element
Netlify CMS always creates its own DOM element for mounting the application, which means it always takes over the entire page, and is generally inflexible if you're trying to do something creative, like injecting it into a shared context.

Expand Down
56 changes: 3 additions & 53 deletions website/content/docs/widgets/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,16 @@ label: "List"
title: list
---

The list widget allows you to create a repeatable item in the UI which saves as a list of widget values. map a user-provided string with a comma delimiter into a list. You can choose any widget as a child of a list widget—even other lists. Or you can define a list of different object widgets.
The list widget allows you to create a repeatable item in the UI which saves as a list of widget values. map a user-provided string with a comma delimiter into a list. You can choose any widget as a child of a list widget—even other lists.

- **Name:** `list`
- **UI:** if `fields` is specified, field containing a repeatable child widget, with controls for adding, deleting, and re-ordering the repeated widgets; if unspecified, a text input for entering comma-separated values. If `types` is specified instead, the list will render items of different widget types.
- **UI:** if `fields` is specified, field containing a repeatable child widget, with controls for adding, deleting, and re-ordering the repeated widgets; if unspecified, a text input for entering comma-separated values
- **Data type:** list of widget values
- **Options:**
- `default`: if `fields` is specified, declare defaults on the child widgets; if not, you may specify a list of strings to populate the text field
- `allow_add`: if added and labeled `false`, button to add additional widgets disappears. When used together with `types`, additional control for selecting a widget type will be available.
- `allow_add`: if added and labeled `false`, button to add additional widgets disappears
- `field`: a single widget field to be repeated
- `fields`: a nested list of multiple widget fields to be included in each repeatable iteration
- `types`: a nested list of object widgets. All widgets must be of type `object`. Every object widget may define different set of fields.
- `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`.
- **Example** (`field`/`fields` not specified):
```yaml
- label: "Tags"
Expand Down Expand Up @@ -51,51 +49,3 @@ The list widget allows you to create a repeatable item in the UI which saves as
- {label: Name, name: name, widget: string, default: "Emmet"}
- {label: Avatar, name: avatar, widget: image, default: "/img/emmet.jpg"}
```
- **Example** (with `types`):
```yaml
- label: "Home Section"
name: "sections"
widget: "list"
types:
- label: "Carousel"
name: "carousel"
widget: object
fields:
- {label: Header, name: header, widget: string, default: "Image Gallery"}
- {label: Template, name: template, widget: string, default: "carousel.html"}
- label: Images
name: images
widget: list
field: {label: Image, name: image, widget: image}
- label: "Spotlight"
name: "spotlight"
widget: object
fields:
- {label: Header, name: header, widget: string, default: "Spotlight"}
- {label: Template, name: template, widget: string, default: "spotlight.html"}
- {label: Text, name: text, widget: text, default: "Hello World"}
```
Above list widget may be used to create following frontmatter with two carousel and one spotlight sections:
```yaml
title: Home
sections:
- type: carousel
header: Image Gallery
template: carousel.html
images:
- images/image01.png
- images/image02.png
- images/image03.png
- type: spotlight
header: Spotlight
template: spotlight.html
text: Hello World
- type: carousel
header: Image Gallery
template: carousel.html
images:
- images/image04.png
- images/image05.png
- images/image06.png
```
The `type` field must be present on every item in the list. It will be added automatically when new item is created through CMS. To use different name for this field, use `typeKey` option.

0 comments on commit 3ed0efe

Please sign in to comment.