Netlify CMS widget for adding relation to a list from a file in a collection
npm install @jamify-it/netlify-cms-widget-list-relationThis is a widget for Netlify CMS.
Standard relation widget only allows for using folder collection. This widget works with files collections instead, or to be more precise, with lists inside those files. See
As an npm package:
``shell`
npm install --save @jamify-it/netlify-cms-widget-list-relation
`js
import ListRelation from '@jamify-it/netlify-cms-widget-list-relation';
CMS.registerWidget('list-relation', ListRelation.Control, ListRelation.Preview);
`
Add to your Netlify CMS configuration:
`yaml`
fields:
- name: authors,
label: Authors,
widget: list-relation
collection:
name: settings # name of the collection
file: people # name of the file
field: authors # key of the field containing a list
# other settings as in the relation widget
multiple: true
searchFields: [name, email]
valueField: email
displayField: name
This assumes you have a files collection named settings (see example below).
For info on fields multiple, searchFields, valueField and displayField, refer to relation widget documentation.
File site/data/settings/people.yml:
`yaml`
authors:
- {name: Jane Jones, email: jane.jones@example.com}
- {name: Dan Doe, email: dan.doe@example.com}
File site/content/projects/summer-project.md:
`yaml`
---
name: My Great Summer Project
authors: [jane.jones@example.com, dan.doe@example.com]
---
File config.yml (showing only collections):
`yaml``
collections:
- name: settings
label: Settings
files:
- name: people
label: People
file: site/data/settings/people.yml
extension: yml
fields:
- name: authors
label: Authors
widget: list
fields:
- {name: name, label: Full name, widget: string}
- {name: email, label: Email, widget: string}
- name: projects
label: Projects
folder: site/content/projects
fields:
- {name: name, label: Full name, widget: string}
- name: authors,
label: Authors,
widget: list-relation
collection:
name: settings
file: people
field: authors
multiple: true
searchFields: [name, email]
valueField: email
displayField: name
For help with this widget, open an issue or ask the Netlify CMS community in Gitter.
- based on netlify-cms-widget-relation and heavily modified
- project setup from netlify-cms-widget-starter, but needed updating