Filter items in relation field by default

[austincondiff]

I'd like the ability to filter a relation field to only display items that match a certain field.

[erquhart]

Can you give an example?

[austincondiff]

I have two folder collections, products and productCategories. I have a few product categories, two of which are "electronics" and "accessories". I have a relation field to choose the product category but I also have another relation field to select multiple accessories for that product.

I want to be able to limit or filter the products that you can select in the accessories relation field to only products that have the category relation field set to "accessories".

I'd like to display a section at the bottom of my product page that lists the accessories available for that product. Because these accessories are also products, the user can click any of them to view these products using the products template just like any other product.

Here is a snippet in my static/admin/config.yml.

collections:
  - name: "productCategories"
    label: "Product Categories"
    folder: "src/pages/product-categories"
    create: true
    slug: "{{fields.slug}}"
    fields:
      - { label: "Product Category Name", name: "title" }
      - { label: "Slug", name: "slug", required: true, pattern: ["^[a-z0-9]+(?:-[a-z0-9]+)*$", "Cannot contain spaces, capital letters, or special characters. You may separate words with dashes and numbers are allowed."], hint: "This will be used in the URL." }
  - name: "products"
    label: "Products"
    folder: "src/pages/products"
    create: true
    slug: "{{fields.slug}}"
    fields:
      - { label: "Product Name", name: "title" }
      - { label: "Slug", name: "slug", required: true, pattern: ["^[a-z0-9]+(?:-[a-z0-9]+)*$", "Cannot contain spaces, capital letters, or special characters. You may separate words with dashes and numbers are allowed."], hint: "This will be used in the URL." }
      - { label: "Category", name: "category", widget: "relation", collection: "productCategories", searchFields: ["title"], valueField: "slug", displayFields: ["title"] }
      - { label: "Overview", name: "overview", widget: "markdown" }
      - { label: "Price", name: "price" }
      - { label: "Accessories", name: "accessories", widget: "relation", collection: "products", searchFields: ["title"], valueField: "slug", displayFields: ["title"], multiple: true, required: false }
      - { label: "Related Products", name: "relatedProducts", widget: "relation", collection: "products", searchFields: ["title"], valueField: "slug", displayFields: ["title"], multiple: true, required: false }

Let me know if you need any clarification.

[tomrutgers]

Sounds like it’s related to #565

[erquhart]

Yep, this is a duplicate of #565, please thumb that issue up and subscribe to get updates 👍

[austincondiff]

@erquhart @tomrutgers I think you might be misunderstanding what I am saying. From what I can tell this is a separate issue from #585 which advocates for conditional fields.

I am proposing a relation field that displays a filtered folder collection in it's dropdown menu, based on fields set in each of the item in the collection.

In this context, I only want to display products in the relation field dropdown that are associated with the accessory category (where categories are its own folder collection). Are you following me?

[erquhart]

Right - if we have conditional fields, you can set up two relation fields and display only one based on the value of the first relation field.

_{Sent with GitHawk}

[austincondiff]

That is not what I am saying at all. Let me try to explain better.

In product edit screen, I want to have a relation field called accessories that lists other products, but only lists the products in the accessory product category.

Product Categories is a folder collection, each category is an item within that collection.

Consider the following...

Categories:

• Electronics
• Clothing
• Accessories

Products:

• iPhone (category: Electronics)
• iPhone Case (category: Accessories)
• T-shirt (category: Clothing)

If I go to edit the iPhone product, I see the following fields:

• Title
• Category (relation to Product Categories collection)
• Price
• Description
• Accessories (relation to self - Products collection)

When I click on the accessories drop down, I only want to see iPhone case because this product has a category of accessories. I don’t want to see iPhone and Tshirt as they do not have accessories set as their associated product category. Does that make more sense?

[erquhart]

Ah you're totally right, I was thinking you had different collections for each product category rather than a single product collection. We could add filtering to the relation widget with the same approach taken for the filter property on collections themselves: https://www.netlifycms.org/docs/collection-types#filtered-folder-collections

We would just need to treat the filter value as a template, so you could do:

  - label: "Related Products"
    name: "relatedProducts"
    widget: "relation"
    collection: "products"
    searchFields: ["title"]
    valueField: "slug"
    displayFields: ["title"]
    filter:
      field: category
      value: "{{category}}"
    multiple: true
    required: false

Thoughts?

[austincondiff]

You are on the right track! I’d do something like this...

  - label: "Related Products"
    name: "relatedProducts"
    widget: "relation"
    collection: "products"
    searchFields: ["title"]
    valueField: "slug"
    displayFields: ["title"]
    filters:
      - field: category
        values: ["accessories", "add-ons"]
      - field: colors
        values: ["red", "blue"]
    multiple: true
    required: false

This allows multiple filters and values to allow more flexibility.

[erquhart]

Allowing multiple filters could work, but keeping it simple and using existing logic makes this low hanging fruit. You'll want to use template strings rather than hardcoding, hence my use of {{category}} rather than "accessories", as you need the current value of the field as the filter.

_{Sent with GitHawk}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Niek]

Related to this, it would be great if it'd be possible to filter on the existence of a field, so something like filter: {field: "myfield"} means "any value".

[miguelt1]

this feature would be awesome, so we could filter a relation by language for example

[JimmyOei]

I was also looking for a feature like this, but it was not implemented yet even after so many years. I then created my own custom relation widget a couple weeks ago, which works exactly as @austincondiff mentioned, using:

filters:
  - field: category
    values: ["accessories", "add-ons"]
  - field: colors
    values: ["red", "blue"]

But I think this feature would be really nice to have in the relation widget by default. Could I pick this up?

[cfhull]

Super cool that filters were added, but I don't think the current version covers the initial requirements on this issue. I don't see a way to filter the options based on a sibling field, only on a child field.

I want to have two relation fields next to each other, where the values of the second one are filtered based on the selected value of the first one. I believe that's what this comment above was referring to.

You'll want to use template strings rather than hardcoding, hence my use of {{category}} rather than "accessories", as you need the current value of the field as the filter.

Is this currently possible, or could it be possible?

[JimmyOei]

That indeed would be nice. I wanted to use such a feature as well in multiple situations now. I was looking into doing this for every widget a couple weeks ago but never continued. My idea was to check in the render logic of a widget (which is the core logic that calls a widget's event logic) the fields that are going to be passed to the widget's event logic function on the occurrences of {{*}} and replacing it with the actual value that is in that sibling field. Then the widget event logic will always see a "normal" value and doesn't need to adapt any logic for reference fields. It would be great to get feedback on this idea as I'm probably forgetting something that complicates it.

[mmkal]

It sounds like you could use variable types for that. Depending on the use case it might be a little cumbersome but I think it'd work.