Conditional fields

[CarloBu]

I can't find the option to make Conditional fields based of the boolean status.
The idea is to make field visibility conditional, based on other fields' values.
maybe it's here, but I can't find it.

by example:
- {label: Is News?, name: isNews, widget: boolean, default: true, i18n: duplicate}
- {label: News Description, name: newsDescription, widget: string, i18n: true}

the idea that the News Description field would be visible only when isNews boolean is true. that would give a good UX for the client to see only fields that are required for the situation. In this case, the news field would be shown if the project is news worthy,

[kyoshino]

I think this is relevant:

• dependent fields in collection decaporg/decap-cms#565

Sveltia CMS has already solved this problem by supporting variable types for the Object widget, not only for the List widget. I don’t have a detailed document yet, but you can use the same types option to have conditional fields. Check it out!

[CarloBu]

Yes, I'm familiar with this, I'm using this feature already for other collections. You are right, that this is already working from another way. I just thought the boolean + condition field would be a more intuitive solution for this particular case when I need a clear on-off state. this is the solution with the variable types. I just need to inform the client not to generate more than one news field and the problem is solved.

    fields:
      - label: 'Is it News?'
        name: 'isNews'
        required: false
        widget: 'list'
        types:
          - label: 'News Description'
            name: 'carousel'
            widget: string
            fields:
              - {label: News Description, name: newsDescription, widget: string, required: false}

Recording.2024-05-10.095642.mp4

[kyoshino]

For the variable object types, you can add only one field. Actually in your case, you can just use required: false with widget: object instead of variable types:

    fields:
      - label: 'Is it News?'
        name: 'isNews'
        required: false
        widget: object
        fields:
          - label: 'News Description'
            name: 'carousel'
            widget: string
            fields:
              - {label: News Description, name: newsDescription, widget: string, required: false}

The UI will look like:

This cannot be done with Netlify/Decap CMS 😆

[CarloBu]

oh, this is much better, thanks!

[kyoshino]

And yeah, as you said, a checkbox may be more intuitive here. I can change the UI 🙂

[CarloBu]

yes, but if it's only not hard to implement for you.

I guess it could be simple ternary operator to the string widget and could look like:

fields:
  - label: Is it News?
    name: isNews
    widget: boolean   <- or checkbox
    default: true
    required: false}
  - label: News Description
    name: newsDescription
    visibleIf: 'isNews'         <- maybe like this, or name it displayCondition?
    widget: string}

[CarloBu]

wait, you mentioned checkboxes, are checkboxes possible for relation widget?

I went to the sveltia and decapcms issues and found only mention custom tag widget that is not supported at sveltia. I made that the client can build and modify categories list through reference content collection schema, and at current I can only let to select only one item through radio buttons. If it's possible to convert this field to checkboxes to get the array, please give me a hint.
fields:
- {label: Category, name: category, widget: relation, collection: categories, value_field: defaultLocaleVersion, display_fields: [category]}

[kyoshino]

You can get checkboxes with widget: relation + multiple: true.

[CarloBu]

hehe, lol, that's unexpected:

it works like a charm!
I double checked now, and I still didn't find about "multiple: true" in the sveltiacms or decap readme.
You need proper documentation about advanced fields. :)
I will collect these cool options that I will find and prepare these for the template, 100% sure very few people know about these powerful options.

[kyoshino]

I think the Decap Relation widget doc mentions the multiple option 🙂 The checkbox UI is only with Sveltia 😆

I just shipped v0.26.2 to use a checkbox for optional (required: false) objects. I’ll work on conditional fields sometime later.

[CarloBu]

I care a lot about the client's UX, and you make me happy! thanks!

this is better now than I expected!

[CarloBu]

Hey, @kyoshino
I think I found the bug in the checkbox for optional objects when there is a nested list, it generates a duplicate in the second language. for a single language, it works fine.

this is a strip-down config setup to replicate the bug behaviour.

i18n:
    structure: multiple_folders
    locales:
        - lt
        - en
    default_locale: lt
    canonical_slug:
      key: defaultLocaleVersion
      value: 'lt/{{slug}}'
slug:
  encoding: "ascii"
  clean_accents: true
  sanitize_replacement: "-"
collections:
  - name: Test
    label: testPage
    folder: src/content/test
    create: true
    i18n: duplicate
    format: yml
    extension: yaml
    fields:
      - label: 'Test Field'
        name: 'testField'
        required: false
        widget: object
        i18n: duplicate
        fields:
          - label: 'Nested test field list'
            name: 'nestedTestFieldList'
            widget: list
            i18n: duplicate
            fields:
              - {label: Title, name: title, widget: string, i18n: true}

nested.fields.mp4

[CarloBu]

my requested optional field feature come to bite me :)

edit edit:
I think I finally got it :)
When creating or modifying an entry in Sveltia CMS, if I click on a checkbox and then uncheck it, Sveltia does not register the unchecked field as null. The same issue occurs with populated data in a checked field that is then unchecked. Sveltia only registers a null value if the checkbox field is untouched. and it does not matter what the setup is

edit:
It appears that whether null gets registered in the YAML file or not is random. In a long collection setup, if I change a seemingly unrelated field, Sveltia saves the YAML file without registering null for an unchecked field. I couldn't pinpoint what makes Sveltia fail to register null for an unchecked field. Therefore, my best bet would be to create a helper function to ensure either null or the actual value gets saved.

I found another strange behavior with the setup below.
if the title has i18n true:
I get the testField null
the yaml output:

title: sample
testField: null

setup:

collections:
  - name: Test
    label: testPage
    folder: src/content/test
    create: true
    i18n: duplicate
    format: yml
    extension: yaml
    fields:
      - {label: Title, name: title, widget: string, i18n: true}   <---   i18n: true
      - label: 'Test Field'
        name: 'testField'
        required: false
        widget: object
        i18n: duplicate
        fields:
          - label: 'Nested test field list'
            name: 'nestedTestFieldList'
            widget: list
            i18n: duplicate
            fields:
              - {label: Title, name: title, widget: string, i18n: true}

but when the title has i18n duplicate,
I get the testField unregistered
the yaml output:

title: sample

setup:

collections:
  - name: Test
    label: testPage
    folder: src/content/test
    create: true
    i18n: duplicate
    format: yml
    extension: yaml
    fields:
      - {label: Title, name: title, widget: string, i18n: duplicate} <---  i18n: duplicate
      - label: 'Test Field'
        name: 'testField'
        required: false
        widget: object
        i18n: duplicate
        fields:
          - label: 'Nested test field list'
            name: 'nestedTestFieldList'
            widget: list
            i18n: duplicate
            fields:
              - {label: Title, name: title, widget: string, i18n: true}

I would like to get null value when the checkbox is not selected.

[kyoshino]

Will check.

[kyoshino]

The fix shipped with v0.35.0 🚢

[CarloBu]

super, thank you very much! Will check how it works asap