Chained Select Fields

default discord avatar
etmartinkazoo
10 months ago
1 1

Hi All,

I have two select fields that I need to "chain".

It is a basic project management tool and it has the following collections: "Organizations", "Projects", "Tasks".

In the tasks collection I have one field "organizations" that is a relationship and displays all organizations. The other is "projects" which is also a relationship and displays all projects. I would like to make it such that when you select a specific organization, the projects list will only display the projects of that organization.

I could do this in a traditional monolith with an Ajax call and a subsequent filter on the projects list via a query. I am totally at a loss how to solve this in Payload though.

Any help would be greatly appreciated. Thanks!

  • discord user avatar
    DanRibbens
    Payload Team
    10 months ago

    This is what the filterOptions property is for on the relationship field.
    You will return a query on your projects field's filterOptions to only get the projects equal to the organization ID that is selected from your data or siblingData.

    https://payloadcms.com/docs/fields/relationship#filtering-relationship-options

    7 replies
  • default discord avatar
    etmartinkazoo
    10 months ago

    Okay, that is helpful. I've been in that part of the docs and have the following:

    {
          name: 'projects',
          type: 'relationship',
          relationTo: 'projects',
          filterOptions: ({ siblingData }) => {
            return {
              'id': { equal: siblingData.organization }
            }
          },
    },
    

    Hope you are staying warm in the Michigan snowstorm!

  • default discord avatar
    etmartinkazoo
    10 months ago

    Okay, I have it working now with the following:

    const projectsField = {
      name: 'project',
      admin: {
        position: 'sidebar'
      },
      type: 'relationship',
      relationTo: 'projects',
      filterOptions: ({ siblingData }) => {
        return {
          'organization': { equals: siblingData.organization }
        }
      },
    };
    

    The only issue is that I have to save the record first and it only filters after clicking save.

  • default discord avatar
    etmartinkazoo
    10 months ago

    I'm also wondering if the newly announced use-context-selector (https://payloadcms.com/blog/launch-week-day-4) might be of help in this scenario?

  • discord user avatar
    DanRibbens
    Payload Team
    10 months ago

    Thanks for the update. That issue is something we need to address. Would you want to create a new issue for it?

  • default discord avatar
    etmartinkazoo
    10 months ago

    @DanRibbens - Sure thing, I'll create an issue now.

  • discord user avatar
    DanRibbens
    Payload Team
    10 months ago

    Thanks! Have a great weekend and stay warm!

  • default discord avatar
    etmartinkazoo
    10 months ago

    I had to help a friend get their truck with snow plow this evening and it was terrible out; less than 10 feet of visibility on the interstate. Definitely pretty from indoors but not safe otherwise.

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.