The feature in action:
If you'd like to have two multiselect components with the same values in each component, but if the value is selected in one, it shouldn’t be able to be selected in the other all while inside a list view, then this is the post for you! The simple solution (two multiselects, no list views involved) is linked here.
- Create your query that will populate the multiselect components. Your multiselects' data could also come from any other array.
- Create a JS query to check if we should be populating the multiselect with default or filtered data.
let results = [];
for (let i=0; i<listView1.instances; i++) {
let first_arr = multiselect2[i].value.length ? getActors.data.first_name.filter(x => !multiselect2[i].value.includes(x)) : getActors.data.first_name
let anti_arr = multiselect1[i].value.length ? getActors.data.first_name.filter(x => !multiselect1[i].value.includes(x)) : getActors.data.first_name
let obj = {first: first_arr, anti: anti_arr}
results.push(obj);
}
return results;
-
Make sure to trigger this JS query on success of the main query (getActors in this example) to populate the multiselects on page load!
-
Set the multiselect’s data property to the JS query’s data using the Javascript Data source option. Since we’re inside a list view, we need to use the index to grab the correct data object. For the first/left/OG/etc. multiselect, key into the ‘first’ object and ‘anti’ for the second. These names are arbitrarily set in the JS query, so feel free to change!
- From each multiselect component, add an event handler to trigger this JS query on change. This way, we ensure that the data is properly filtering with every new selection or change
See attached JSON of this app below and feel free to import in your own Retool organization (docs on importing here).
multiselect depending on multiselect in listview.json (18.1 KB)
This should be a good jumping-off point, though you may need to make some slight adjustments based on your data source!
Transformers definitely seem like the obvious, automatically-updating choice here. Let me see if there's a reason why I used JS queries and get back to you!
