How to create a dependent cascade Select in Settings

[harpo666]

Hi guys,

I am trying to create a dependent Select list in Settings.jsx where the first selection list filters the results in the second select list.

An example is I have 3 categories Coffee, Tea and Wine. The first select statement picks one of the 3 categories. The second select filters only the results relevant to the category. For example, if I pick Tea, the second select list will only contain 'black' and 'green' tea.

Any idea how I can set this up?

Thanks.

// settings/index.jsx

<Select
  label={`Selection 1`}
  settingsKey="selection1"
  options={[
    {name:"Coffee"},
    {name:"Tea"},
    {name:"Wine"}
  ]}
/>

<Select
  label={`Selection 2`}
  settingsKey="selection2"
  options={[
    //Based off selection1 entry
  ]}
/>

[Gondwana]

At a guess, set up an onSelection handler for selection1 (you can do this in the .jsx file). The handler should populate an options array appropriate to the selection. Reuse the same array regardless of selection.

The selection2 options attribute should simply refer to that array.

Finally, hope that React does its magic and repopulates selection2 when it notices that the options array has changed.

[harpo666]

Thanks for the reply catplace. I’ll have to have a think about how to make that work.

[skyway · Accepted solution]

You can use the settingsStorage to hold the name of the selected category, and then at the top of the function get the correct set of options for the second Select by having a function you can call that gets the set of options for the given category. Something like this:

registerSettingsPage(props => {
  var secondOptions = optionsForCategory(
    props.settingsStorage.getItem("category")
  );
  return (
    <Page>
      <Select
        label={`Selection 1`}
        settingsKey="selection1"
        options={[
          { name: "Coffee" },
          { name: "Tea" },
          { name: "Wine" }
        ]}
        onSelection={({values}) => {
          props.settingsStorage.setItem("category", values[0].name);
        }}
      />

      <Select
        label={`Selection 2`}
        settingsKey="selection2"
        options={secondOptions}
      />
    </Page>
  );
});

This works because when a new value is set in the settingsStorage, it triggers a re-render of the settings page. You should probably also handle the case of there being no value for "category" in the settingsStorage, but I'll leave that to you 🙂

[harpo666]

That is terrific skyway!

Thanks guys for your help!

Below is the full example I got working In settings.jsx with the option values for the second selection.

var optionsForCategory={Coffee:[{name:'Instant'},{name:'Late'},{name:'Mocha'},{name:'Cuppuccino'},{name:'Espresso'}],Tea:[{name:'Black'},{name:'Green'}],Wine:[{name:'Brandy'},{name:'Whisky'},{name:'Vodka'},{name:'Rum'},{name:'Sake'}]}

registerSettingsPage(props => {
  var secondOptions = optionsForCategory[props.settingsStorage.getItem("category")];
  return (
    <Page>
      <Select
        label={`Selection 1`}
        settingsKey="selection1"
        options={[
          { name: "Coffee" },
          { name: "Tea" },
          { name: "Wine" }
        ]}
        onSelection={({values}) => {
          props.settingsStorage.setItem("category", values[0].name);
        }}
      />

      <Select
        label={`Selection 2`}
        settingsKey="selection2"
        options={secondOptions}
      />
    </Page>
  );
});