Using the built-in form editor - Collapse

[Mindreader]

Hi Developers,

is it possible in the built-in form editor:

Custom card | Home Assistant Developer Docs

adding a “collapse group” around elements like the possiblillity we have in the config flow

            # Filter
            vol.Required("filter_options"): data_entry_flow.section(
                vol.Schema(
                    {
                        vol.Optional(CONF_ONLYLINE,            default=DEFAULT_ONLYLINE): str,
                        vol.Optional(CONF_HIDEDESTINATION,     default=DEFAULT_HIDEDESTINATION): str,
                        vol.Optional(CONF_ONLYDESTINATION,     default=DEFAULT_ONLYDESTINATION): str,
                    }
                ),
                # Whether or not the section is initially collapsed (default = False)
                {"collapsed": True},
            ),

The reason is that I have a lot of options in my card and I want to continue using the build in editor

[dcapslock (Darryn Capes-Davis)]

Yes. Use type expander

Sample

export const ExpanderCardEditorSchema = [
    {
        type: 'expandable',
        label: 'Expander Card Settings',
        icon: 'mdi:arrow-down-bold-box-outline',
        schema: [
…

See here for the full expander-card editor schema.

[Mindreader]

To make sure we are talking about the same function.
I am talking about the getConfigForm for the “build in editor form” for normal JS cards, not for TS

    // Editor Configuration
    static getConfigForm() {
    return {
        schema: [
            {
                name: "mode",
                label: translate("editor.labels.mode"),
                selector: {
                    select: {
                        mode: "dropdown",
                        options: [
                            { value: "shopping", label: translate("editor.options.mode.shopping") },
                            { value: "todo",     label: translate("editor.options.mode.todo") }
                        ]
                    }
                },
                default: "shopping"
            },
            {
                name: "entity",
                required: false,
                selector: {
                    entity: {
                        domain: ["todo"] // only entities with domain "todo"
                    }
                },
            },
            {
                name: "chips_position",
                selector: {
                    select: {
                        options: [
                            { value: "auto", label: translate("editor.options.chips_position.auto") },
							{ value: "auto_panel", label: translate("editor.options.chips_position.auto_panel") },
                            { value: "bottom", label: translate("editor.options.chips_position.bottom") },
                            { value: "right", label: translate("editor.options.chips_position.right") },
                            { value: "full", label: translate("editor.options.chips_position.full") }
                        ]
                    }
                },
                default: "auto"
            },
            .....

[karwosts]

Yeah that’s the same thing.

Your schema will contain an item of type: expandable (that’s the entire expansion panel), and then inside that item you will have a second schema with a list of all the controls that go inside that expansion panel.

JS or TS shouldn’t matter.

[Mindreader]

Its working

{
  type: 'expandable',
  label: 'Font sizes',
  icon: 'mdi:format-size',
  schema: [
    {
      name: "cat_font_size",
      selector: { number: { min: 8, max: 30, step: 1 } },
      default: 16
    },
    {
      name: "list_font_size",
      selector: { number: { min: 8, max: 30, step: 1 } },
      default: 14
    },
    {
      name: "chip_font_size",
      selector: { number: { min: 8, max: 30, step: 1 } },
      default: 12
    }
  ]
},

EDIT: much much better than before