Cascader component in mobile app

Mobile
,
1

Hi!
Is the cascader component really unavailable in mobile retool?

2

Hey @loicchabut35!

Unfortunately, it doesn't look like there's one available at the moment. I've filed a request for it with the dev team though and we can let you know here if it's made available.

In the meantime, you might try using multiple screens with collection views to achieve a similar effect.

Using a structure like the following seems to work pretty well:

[
  {
    title: "pants",
    options: [
      {
        title: "denim",
        options: [
          {
            title: "jeans"
          },
        ],
      },
    ],
  },
  {
    title: "shoes",
    options: [
      {
        title: "athletic",
        options: [
          {
            title: "running"
          },
          {
            title: "soccer"
          }
        ]
      }
    ]
  },
]

That way, you can have each collection view reference the selected item from the previous screen:

Navigation is then also contingent on whether or not there are any options to navigate to, and you can also conditionally show the navigation icon. The lodash _.isEmpty function is super helpful here (docs).

Inversely, you can fire an event that ends the selection process if there are no more items in that branch:

I've attached an example app that's not meant to be complete but more of a skeleton for you to import and build off if it would be helpful!
mobile_cascader_workaround.json

3

Thanks @Kabirdas for your detailed answer. I thus learnt about temporary states and I could make it to work.
I had however to add a trigger on page load so that my JS query would run, otherwise the collection view would be empty. I don't know why, but in your example it wasn't necessary.
I then thought that I might also have two select, and condition the values of the second one to the answer of the first one, but your solution is a neat one and a pretty nice one too.
Thanks!