Storing Multi-Select Selections from an API source as Query Params Change

App Building
1

I'm building a form with a multi-select component with mapped options from an API Source.

This endpoint has ~2900 items with a size limit of 100 so they can't be returned simultaneously with a single call.

I'm placing a text input before the dropdown that acts as a search filter for the API call, since that is more practical than scrolling through ~2900 options.

I'm looking for a way to store these selections as I change the search filter so I can build up my multi-select list over the course of a few queries

Loom here. You can see once I clear my first search filter, the selections dissapear.

Any suggestions here? Can I build another variable or JS query? Ideally it would be easy to remove selections form the new list as well.
Thanks

2

Hey Henry, I'd use a combination of three components and a variable to store state:

  1. optionSearch (Text Input component)
  2. optionChooser (Multiselect component)
  3. selectedOptionsDisplay (Multiselect Listbox component)
  4. selectedOptions (variable)

The first two components you've already built: a text input to search options and a multiselect to display searched options.

For a user to add an option, you'll use the inputValueChange event on optionChooser to trigger a script that updates selectedOptions.

You'll use selectedOptions as the mapped data source for selectedOptionsDisplay.

Finally, if a user deselects an option in selectedOptionsDisplay you'll need to trigger a script to remove that option from selectedOptions.

This way selectedOptions will maintain state and users will be able to filter options without losing what they've already selected.

Let me know how it goes.

3

Hi @evan-retool

Thanks for these suggestions, I explored a bit more in this direction. I was able to build what you described. The issues I ran into were

  • Getting the entire object of each array item to store in the variable and populate the listbox (could only get the singular value). Thus my listbox displayed each item with a numerical ID rather than the readable label I needed.
  • Retaining the variable as I performed a new search

The solution I'm using now is a bit different:

  • Loop through the original GET request using pagination
  • "page" is a variable with an initial value of 1
  • Success event handlers for the GET request
    -Add+1 to the page variable
    -Add the data to the current value of a variable called accumulated_markers
    -Trigger itself
  • This loop stops when a page number is reached where the get request returns an empty array. So I use "Only run when" data.length==0
  • It takes about 15 seconds for this cycle to complete during which I have a non-closable modal with an indeterminate loading indicator
    *I use accumlated_markers as the data source for my dropdown.