How to Program Select Component to list based on selection made in previous Select Component

App Building
1

I am connecting to my own PostgreSQL server where I am setting up a Property Management database. I have an 'organization_structure' table with columns for each of the 5 possible levels within the organizations. I want to be able to add a new org element at any level (1 to 5). But I also want the user to be able to select an existing upper level. For instance, Level 1 currently has 3 entities (Scouts Canada, Ontario Incorporated Body, Quebec Property Society), Level 2 under the 'Scouts Canada' currently has 1 entity (Office of the CEO) and the other 2 Level 1 entities do not currently have any further entities specified at any other level; Level 3 currently has 2 entities under the Office of the CEO, etc., etc.

On the form, how do I configure the 'Select' components so that:

  1. The first 'Select' component lists the Level 1 entities (Organizations), and allows for the addition of a new entity?
  2. The subsequent 'Select' components list the entities filtered by the selection of the previous 'Select' components?
  3. Is it possible to add a new entity at any of the levels?
  4. Is it possible to configure the 'Select' component so that if nothing is entered in it it will put a hyphen ("-")?

image
image1009×684 40.7 KB

image
image1531×644 58.8 KB

2

Just curious, any reason why you built the table this way instead of separate tables with foreign keys? Doing so would make handling data on the frontend quite a bit simpler.

  1. As-is, select id and organization_en from your table and plug them into the table. Just know that you'll end up with multiple identical names in the menu, all with different IDs behind them. To allow a custom value, select the box in the 'interaction' menu.

  2. This is much easier if you separate your columns into tables, but as-is you can use filter in a Javascript query to only show the values that match your upstream selections.

  3. Yep, just select the 'allow custom values' box in the interaction menu.

  4. Use a hyphen in the 'Placeholder' field in your select component.