@jamify-it/netlify-cms-widget-list-relation

This 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

Check out a demo!

Install

As an npm package:

npm install --save @jamify-it/netlify-cms-widget-list-relation

import ListRelation from '@jamify-it/netlify-cms-widget-list-relation';

CMS.registerWidget('list-relation', ListRelation.Control, ListRelation.Preview);

How to use

Add to your Netlify CMS configuration:

    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.

Example

File site/data/settings/people.yml:

authors: 
  - {name: Jane Jones, email: [e-mail]}
  - {name: Dan Doe, email: [e-mail]}

File site/content/projects/summer-project.md:

---
name: My Great Summer Project
authors: [[e-mail], [e-mail]]
---

File config.yml (showing only collections):

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

Support

For help with this widget, open an issue or ask the Netlify CMS community in Gitter.

Attributions

• based on netlify-cms-widget-relation and heavily modified
• project setup from netlify-cms-widget-starter, but needed updating