Cascader: Can you set and ID and Label, like other select/listviews?

App Building
1

With listviews and select inputs, you can set both the 'hidden' ID/value, and the visible 'Label' that is shown instead of the value. Really useful when you have an ID, and a human readable text.

It doesn't look like that is possible with the cascader, which significantly reduces it's utility.
Am I missing something? Can anyone point to how I might do this; or do I just need to switch to a listview instead (and lose the nice tree structure I'd get from the cascader)

1 Like
2

Hey @Quirkz!

This is possible, though it certainly could be better documented. Can you try using a structure similar to this one?

[
  {
    value: 1,
    label: "Option 1",
    children: [
      { value: 1.1, label: "Option 1.1" },
      { value: 1.2, label: "Option 1.2" },
    ],
  },
  {
    value: 2,
    label: "Option 2",
    children: [
      { value: 2.1, label: "Option 2.1" },
      { value: 2.2, label: "Option 2.2" },
    ],
  },
]
1 Like
3

That's perfect! Just tested, and does exactly what I need.

Really should be in the docs! :slight_smile:

Thank you!

4

Here is an example with more cascading that works for me.

image
image719×385 17.4 KB

[
    {
        "value": "1",
        "label": "Option 1",
        "children": [
            { "value": "1.1", "label": "Option 1.1" },
            {
                "value": "1.2",
                "label": "Option 1.2",
                "children": [
                    { "value": "1.2.1", "label": "Option 1.2.1" },
                    { "value": "1.2.2", "label": "Option 1.2.2" }
                ]
            }
        ]
    },
    {
        "value": "2",
        "label": "Option 2",
        "children": [
            { "value": "2.1", "label": "Option 2.1" },
            { "value": "2.2", "label": "Option 2.2" }
        ]
    }
]
3 Likes