Yesterday at office hours, a Tulip user asked if it’s possible to use the value in a single select menu to populate a multiselect menu.
This process is only slightly different than the process of using one single select to dynamically populate values in a second single select, which I wrote up here. In this post, I’ll walk through the extra steps of configuration needed to get your values into a multi-select menu.
From Single Select to Multiselect.
To get started, make sure you’re comfortable with the technique outlined in this post. You’ll need to configure 2 table queries and corresponding Unique Values aggregations in this exercise, too.
The key difference here is that multi-select menus need to take an array, or list, variable, whereas single-select menus require a single-value variable.
So what we need to do is store our Unique Value aggregation, which by default return to the app as an array, into a new array variable.
Let’s say we have a table that stores different types of cleaning processes in one column, and the cleaning tasks associated with them in another.
Our goal is to get a multi-select menu to display the tasks associated with the cleaning type a user picks from a single-select menu.
To get started, make sure you have your table queries and aggregations set up in the app. The first aggregation is a unique values aggregation for the field CLEANING TASK attached to a blank table query—we don’t need any filters or sorting for the single select menu.
Your records menu should look something like this:
And your aggregation should look something like this:
Make sure your second table query takes the variable for your first single select as its app input, and that your second table aggregation pulls unique values from the task column.
Your second query should be configured as follows:
And your second aggregation should look something like this:
Once you’re set with your table queries and aggregations, the next step is to make sure your aggregations are usable in the multi-select menu.
If we look at the multi-select configuration menu, we’ll see that user-input data must be stored in an array variable. Notice how in mine, the only available options are the CLEANING ARRAY variable i made for this purpose, and the returns of a connector function.
There are two ways to get our table aggregation to write to a new variable in a multi-select menu. The first is to create a new text array variable that we can use in the multi-select. This can be done directly in the multi-select menu editor:
The second method is to populate the CLEANING ARRAY variable in the trigger attached to the single select menu.
NOTE: There are advantages and disadvantages to both options. If you create the variable in the trigger attached to the single select, it will automatically select each of the available options. If you use a blank variable, you’ll have to select desired options yourself. I would recommend using a blank variable unless you know you’ll have a small number of options, and selecting by default will save the operator clicks.
Because UNIQUE VALUES aggregations are by default structured as text arrays, we can use a simple DATA MANIPULATION → STORE action to save the aggregation into a variable that can be read by the configuration menu.
Open the trigger editor on the single select menu. Write a single then statement that saves the table aggregation for UNIQUE TASKS to a new variable of your choosing. Your trigger will look like this:
The last step is to use this trigger to provide values in your multi-select menu.
In the end, your multi-select menu should take the UNIQUE TASKS aggregation as its data source, and allow the users selections to be fed into a new CLEANING ARRAY variable.
