Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Relation widget bug when using slug as valueField #4954

Open
andreasbalevik opened this issue Feb 14, 2021 · 2 comments
Open

Relation widget bug when using slug as valueField #4954

andreasbalevik opened this issue Feb 14, 2021 · 2 comments
Labels
area: extensions/widgets/relation type: bug code to address defects in shipped code

Comments

@andreasbalevik
Copy link

andreasbalevik commented Feb 14, 2021

Describe the bug
Relation widget is not working when using {{slug}} as value_field as described here https://www.netlifycms.org/docs/widgets/relation/. The autocomplete field only show one suggestion, and when selecting that option no value is assigned to the field. It works perfectly when using title as value_field. The only problem then is that the relation disappears when the title of the related item changes.

To Reproduce

  1. Add relation widget
label: Top Activeties
name: top_activeties
widget: relation
collection: <collection to search>
search_fields: ["title"]
value_field: '{{slug}}'
display_fields: ["title"]

Expected behavior
Relation field should show all suggestions. When an item is selected the title should display, and the slug should be the value in the markdown file

Screenshots
Only one suggestion when using slug as valueField
Skjermbilde 2021-02-14 kl  14 46 40
When the item is selected the field is not updated with any value, preventing me from saving the page.

This is what it should look like, but now i use title as value_field
Skjermbilde 2021-02-14 kl  14 48 43

CMS configuration

--- 
backend: 
  branch: master
  name: git-gateway

collections: 
  - 
    create: false
    delete: false
    folder: "_cms_EN_frontpage"
    label: "EN: Frontpage"
    name: frontpage
    slug: "{{slug}}"
    identifier_field: "frontpage"
    editor:
      preview: false
    fields:
      - 
        default: index
        label: Layout
        name: layout
        widget: hidden
      - 
        label: Language
        name: lang
        default: "en"
        widget: hidden
      -
        default: Frontpage
        label: Frontpage
        name: frontpage
        widget: hidden
      -
        label: SEO (search optimalization shorttext)
        name: description
        widget: string
      -
        label: Title 1
        name: title_1
        widget: string
      -
        label: Tekstboks 1
        name: textbox_1
        widget: text
      - 
        label: "Top 3 activeties"
        name: "top_3_activeties"
        widget: "list"
        summary: '{{fields.title}}'
        allow_add: true
        max: 3
        min: 3
        field: {label: Activity,name: top_activeties,widget: relation,collection: en_activity,search_fields: ["title"],value_field: '{{slug}}',display_fields: ["title"]}
      -
        label: Title 2
        name: title_2
        widget: string
      -
        label: Tekstboks 2
        name: textbox_2
        widget: text
      -
        label: Title 3
        name: title_3
        widget: string
      -
        label: Tekstboks 3
        name: textbox_3
        widget: text
      - 
        label: "Gallery"
        name: "galleryImages"
        widget: "list"
        summary: '{{fields.image}}'
        field: {label: Image, name: image, widget: image}
  - 
    create: false
    delete: false
    folder: _cms_EN_faq
    label: "EN: FAQ"
    name: en_faq
    slug: "{{slug}}"
    identifier_field: faq
    editor:
      preview: false
    fields: 
      -
        default: FAQ
        label: FAQ
        name: faq
        widget: hidden
      - 
        label: Language
        name: lang
        default: "en"
        widget: hidden
      -
        default: faq
        label: Layout
        name: layout
        widget: hidden
      -
        label: SEO (search optimalization shorttext)
        name: description
        widget: string
      -
        label: Title
        name: title
        widget: string
      - 
        label: "FAQ"
        name: "faq_list"
        minimize_collapsed: true
        widget: "list"
        fields:
          - {label: Title, name: faq_title, widget: string}
          - {label: Content, name: faq_content, widget: markdown }
  - 
    create: false
    delete: false
    folder: _cms_EN_about
    label: "EN: About"
    name: en_about
    slug: "{{slug}}"
    identity_field: about
    editor:
      preview: false
    fields: 
      -
        default: about
        label: About
        name: about
        widget: hidden
      - 
        label: Language
        name: lang
        default: "en"
        widget: hidden
      -
        default: about
        label: Layout
        name: layout
        widget: hidden
      -
        label: SEO (search optimalization shorttext)
        name: description
        widget: string
      -
        label: Title
        name: title
        widget: string
      -
        label: Body
        name: body
        widget: markdown
  -
    create: true
    folder: _cms_EN_activity
    label: "EN: Activity"
    name: en_activity
    editor:
      preview: false
    slug: "{{slug}}"
    fields: 
      - 
        label: Language
        name: lang
        default: "en"
        widget: hidden
      - 
        default: activity
        label: Layout
        name: layout
        widget: hidden
      -
        label: SEO (search optimalization shorttext)
        name: description
        widget: string
      - 
        label: Title
        name: title
        widget: string
      - 
        label: "Gallery"
        name: "galleryImages"
        widget: "list"
        summary: '{{fields.image}}'
        field: {label: Image, name: image, widget: image}
      - 
        label: Body
        name: body
        widget: markdown
      - 
        label: Price
        name: price
        widget: string
        required: false
      -
        label: Time
        name: time
        widget: string
        required: false
      - 
        label: Peoples
        name: people
        widget: string
        required: false
      -
        label: "Practical information"
        name: practical
        widget: markdown
        required: false

media_folder: static/images/uploads

Additional context
netlify-cms-app 2.14.21
bootstrap.js:85 netlify-cms-core 2.38.0
index.js:27 netlify-cms 2.10.91

@andreasbalevik andreasbalevik added the type: bug code to address defects in shipped code label Feb 14, 2021
@ghost
Copy link

ghost commented Feb 23, 2021

Just some additional information from when I encountered this bug this weekend: it only happens when the slug of the target of the relation is something other than "{{slug}}"

So what does not work is:

collections:
  - name: "pages"
    label: "Pagina's"
    files: 
      - name: "pagina"
        ....
        fields: 
          - label: "Page"
            name: "page" 
            widget: "list"
            fields: 
              - label: "Items"
                name: "items"
                widget: "relation"
                collection: "items"
                value_field: "{{slug}}"
                search_fields: ["title"]
  - name: "items"
    label: "Items"
    folder: "content/items"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields: 
      - {label: "Title", name: "title", widget: "string"}
        ...

But what works is:

collections:
  - name: "pages"
    label: "Pagina's"
    files: 
      - name: "de-gelukkigste-klas"
        ....
        fields: 
          - label: "Page"
            name: "page" 
            widget: "list"
            fields: 
              - label: "Items"
                name: "items"
                widget: "relation"
                collection: "items"
                value_field: "{{slug}}"
                search_fields: ["title"]
  - name: "items"
    label: "Items"
    folder: "content/items"
    create: true
    slug: "{{slug}}"
    fields: 
      - {label: "Title", name: "title", widget: "string"}
        ...

@andreasbalevik
Copy link
Author

I solved this by using a uuid plugin written for netlify-cms. Seems UUID is a better way for connecting relations than slug.

Feel free to close this, but i would strongly advice working on a way to implement this as a default to netlify cms.

aidantjones added a commit to Winterstellar-Studios/winterstellar-studios-site that referenced this issue Dec 19, 2022
Relying on slugs for identifying collections items is essentially broken without this plugin. See decaporg/decap-cms#4954 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: extensions/widgets/relation type: bug code to address defects in shipped code
Projects
None yet
Development

No branches or pull requests

2 participants