Link items stored in a list in relation widget

Netlify CMS
,
1

I tried to access team members, which are stored in a list inside a collection, in an other collection. I’m new to Netlify CMS and somehow I don’t arrive to achieve this.

The team collection looks like this:

  - name: 'team'
    label: 'Team'
    identifier_field: 'location'
    slug: 'team-{{location}}'
    fields:
      - { label: 'Location', name: 'location', widget: 'string' }
      - label: 'Team'
        name: 'teamMember'
        label_singular: 'team member'
        identifier_field: 'email'
        widget: 'list'
        fields:
          - { label: 'Firstname', name: 'firstname', widget: 'string' }
          - { label: 'Name', name: 'lastname', widget: 'string' }
          - { label: 'Email', name: 'email', widget: 'string' }

In another collection containing services I want to link a team member to each service as the corresponding specialist.

This collection looks something like this:

  - name: 'services'
    label: 'Services'
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - label: 'Specialist'
        name: 'specialist'
        widget: 'relation'
        collection: 'team'
        searchFields: ['teamMember.firstname', 'teamMember.lastname']
        valueField: 'teamMember.email'
        displayFields: ['{{teamMember.firstname}} {{teamMember.lastname}}']

Somehow I don’t find the right values for searchFields, valueField and displayFields to be able to browse all team members across the teams. Maybe I have to say, that I store the team members in a list, because I need them to be easy reordered.
(Currently the dropdown menu of the Input field specialist just shows as many empty blocks as teams exist, but not the team members.)

Thank you very much for your help.

2

Hi @andre.lergier and welcome to the community!
We’ve just added that feature! You can now expand lists using a wildcard character *.
It doesn’t support templates yet, but you should be able to use this configuration:

collections:
  - name: 'team'
    label: 'Team'
    identifier_field: 'location'
    slug: 'team-{{location}}'
    folder: src/team
    create: true
    fields:
      - { label: 'Location', name: 'location', widget: 'string' }
      - label: 'Team'
        name: 'teamMember'
        label_singular: 'team member'
        identifier_field: 'email'
        widget: 'list'
        fields:
          - { label: 'Firstname', name: 'firstname', widget: 'string' }
          - { label: 'Name', name: 'lastname', widget: 'string' }
          - { label: 'Email', name: 'email', widget: 'string' }
  - name: 'services'
    label: 'Services'
    folder: src/services
    create: true
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - label: 'Specialist'
        name: 'specialist'
        widget: 'relation'
        collection: 'team'
        searchFields: ['teamMember']
        valueField: 'teamMember.*.email'
        displayFields: ['teamMember.*.firstname', 'teamMember.*.lastname']

See here Widgets | Decap CMS | Open-Source Content Management System

I would also consider using a file collection for this use case.

Note: You can still target a specific list item via teamMember.0.email

1 Like
3

Hi @erez!
Thank you very much for your detailed response.
Now it works - perfect! :tada:

1 Like
4

Woohoo! I’m glad it’s working :partying_face: Looks like we added that feature just in time :smile:

1 Like
6

@erez
I have a similar set up and is used with hugo. I’m trying to determine how to have the value_field use the index of the list item that was chosen. I want to be able to use the index with hugo’s index function to get the related data which is in a hugo data yml file, something like this:

{{ $banner := index $.Site.Data.cms.banners.top_banners 0 }}

but that 0 index would be from .Params.top_banner

or value_field: 'top_banners.*' is interesting since it copies the data to the hugo content md file, but that doesnt allow the relation widget to show the selected item after save.

Trying value_field: 'top_banners.*.{{slug}}' ends up saving something that includes the index (top_banners.0.banners) (banners is the name of the file that has the fields prop with the list widget), but I so far don’t see how to get the index alone

7

I’m trying another direction with storing the banners as content (pages) but setting them not to render or list and I will use .GetPage to get the banner. I’m using an object widget to add the frontmatter values. This looks like a better direction, the only ting left is I’d like to hide the object widget since it only has hidden widgets inside.

{
          label: '_build',
          name: '_build',
          widget: 'object',
          fields: [
            { label: 'render', name: 'render', widget: 'hidden', default: false },
            { label: 'list', name: 'list', widget: 'hidden', default: false }
          ]
        }
8

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!