Multi step form for ticketing system. Stuck on user selection steps

💬 App Building
1

  • Goal: Have a ticketing system and table setup, but I want a form that works through a few tables in retool database that are linked by foreign key. I want the user to be able to select through the tables before submitting a ticket.

  • Steps and Details: Let's say I have the following tables in retool database:

Sites
site_name, site_id

Areas
area_name, area_id, site_id (linked to Sites)

Items
item_name, item_id, area_id (linked to Areas)

And then I have a table for Tickets that links to an item_id in the Items table.

I want a form to add a ticket where the user first selects a Site, then selects from a list of Areas based on that selected Site (filtered by site_id), then selects an item based on the selected Site, then fills out ticket info and submits.

I have a table for the tickets and a form to enter a new ticket. I have a select component where the user can choose an Item and my form uses the item_id when submitting the ticket. So, that works as intended. I don't yet, however, have a good plan on how to limit the item choices by having the user select an area and a site first. I have three select components (Sites, Areas, Items), but It isn't clear to me how to 'hide' choices in the Areas select based on the selection made in Sites select. Or, perhaps there is a better component/method? I guess I was thinking of using a query to populate the areas selector, but need to wrap my head around passing in the site selection to the query. I'll play with that now...

Edit: Ok, I worked on this and I think they will work. Area select gets its mapped values for the user to choose from via a js script that filters the table data based on the Site select choice the user makes. I'll do the same for Items and I think I'll be all set. But, would love if there are more elegant solutions/ideas :slight_smile:

I appreciate any time and thoughts!

Thanks,
Brady

2

Hey there @Brady_Meisenhelder,

It all depends on the amount of records that areas and sites have. My first option, as you already did, would be the dropdowns, with each dropdown being shown/filtered based on the selection of the multiselect it depends on. I get the impression you managed to do this, but just in case, the way I do this is by:

1- Setting the dependent multiselect hidden until the main multiselect has a value, e.g. multiselect1.value === null
2- Filtering the available values based on the selected values. I usually apply this directly in the multiselect's data source, as it can be made dynamic. Something like myquery.data.filter(x => multiselect1.value.includes(x.id)) In alternative you can use a transformer and then refer to the value of such transformer.

Another UI experience would be using listviews that show some sort of "cards" from which the user can choose. But that requires different logic.

It would be great if you could share a bit more of screenshots to get more of an idea of your layout and data, that is if you need further help of course.

1 Like
3

Thanks, @MiguelOrtiz ! Sorry for the delayed reply on my end. The cards / list is a nice UI idea as well, perhaps once I have my current effort already in place I'll give that a shot. I'll update with screenshots/examples once I have things in place and if I need further ideas/help.

Best,
Brady

1 Like