Trying to switch drop down data array sources based on an adjacent column selection value within the table

[cz0840]

I'm trying to source from two arrays at once to provide the list values based on the selection in another cell in the table.

My two array sources with a global variables (window.SQL_TermSize1 & window.SQL_TermSize2) to compare to the selected table values (e.g. 20 & 23):

{{(table1.data[table1.selectedDataIndex].ConnPinTermSize == window.SQL_TermSize1 ? WireGauge1.value : WireGauge2.value) || (table1.data[table1.selectedDataIndex].ConnPinTermSize == window.SQL_TermSize2 ? WireGauge2.value : WireGauge1.value)}}

The value and label is set to {{item}}:

The drop down list selection values adjust as expected based on the selection in the other cell value (e.g. terminal size 20 -> sees 20,22,24 & terminal size 23 -> sees 22,24,26,28). All the cells populate as expected from the selections:

The issue I'm having is that some of the cell values (wire gauge) disappear when selecting some rows:

I tried everything I could to no avail.

Clarification:
WireGauge1.value contains values (20,22,24) for window.SQL_TermSize1 (value 20)

WireGauge2value contains values (22,24,26,28) for window.SQL_TermSize2 (value 23)

What am I missing to get that value to remain visible?

If the source value changes for one terminal value (e.g. 20), terminal size of 23 wire gauge values disappears.

At this stage, the table hasn't been written to SQL database yet, so it has a mixture of table1.data & table1.changesetObject values.

How can I get both sets of wire gauge values to show once set to its terminal size?

Or can someone help me with a nested array with a list per terminal size:
Terminal size 20 (value in one drop down) -> dynamically provides a drop down list of 20,22,24
Terminal size 23 (value in one drop down) -> dynamically provides a drop down list of 22,24,26,28

In other words.
I need to have a dynamic drop down per TABLE ROW that keeps their values visible.

Since I can only provide a dynamic drop down list by COLUMN, Providing a hint of choice (20 : 23) and filtering wrong selections, this is the only solution I can come up with.

And help with this problem would be greatly appreciated.

[rh25170]

Hello @cz0840,

I have developed a solution to address the issue at hand. To facilitate a clear understanding of my approach, I have created a sample application that demonstrates the implementation. You are welcome to import this file into your Retool instance to follow along.

To begin, I established a variable wireData to store the test data. This data consists of three columns: ID, terminal_size, and wire_gauge. The ID column is an auto-incrementing integer, while terminal_size features values of 20, 24, and null. The wire_gauge column is initially set to null.

Here is the data stored in the wireData variable:

[{id: 0, terminal_size: 20, wire_gauge: null}, {id: 1, terminal_size: 23, wire_gauge: null}, {id: 2, terminal_size: null, wire_gauge: null}]

Next, I created a variable wireGauges to store the possible values for the drop-down menu. Although this could be defined directly in the drop-down options for the wire_gauge column, I have chosen to store it as a separate variable for clarity.

An example of the wireGauges variable is as follows:

{20: [20, 22, 24], 23: [22, 24, 26, 28]}

I then created a table to display the data and made the wire_gauge column editable. By changing the column type to tag, a drop-down menu is provided. For the option list of this tag field, I specified the following data source:

{{ wireGauges.value[currentSourceRow.terminal_size] }}

Additionally, I set the label value of the mapped options to {{ item }}. This enables the terminal_size to be mapped to the corresponding wire gauges, ensuring that only relevant options appear in the drop-down menu for each row's terminal_size.

Please refer to the attached screenshots for visual confirmation of the solution's effectiveness.

Here is the file: Untitled-2.json (11.6 KB)

I hope this helps! Please let me know if I'm misunderstanding the issue, or if there are any questions/concerns/follow-ups you'd like me to address!

[rh25170]

Hey @cz0840,

Have you had a chance to look over my reply/example and determine if that'll work for you?

[cz0840]

I haven't had a chance yet. I will look at it this week.

If it does work as you say, you walk on water as far as I'm concerned.

Thank you so much for your help.

[cz0840]

I had to tweak a few things and got the drop downs to properly map the wire gauge sizes to a particular terminal size.

I still have the same issue as before where the selected values momentarily disappear when selecting a different terminal size but reappear when I select the same terminal size on another row:

TERM GAUGE
20 24
22 26

When I add a third row using one of the two terminal sizes:

TERM GAUGE
20 24
22
20 20

When I add a fourth row using one of the two terminal sizes:

TERM GAUGE
20
22 26
20
22 28

This is the phenomenon I'm trying to correct.

Any help is greatly appreciated.

[rh25170]

@cz0840,

Could you provide a video or screenshots of what is occurring? I am not sure I understand and I would like to better wrap my mind around what's going on so I can assist better.

[cz0840]

I couldn't get "currentSourceRow" to work. I realized that the terminal value (say 20) was needed for the mapping to the wireGauges array to work for the drop-down (this was your solution):

{{ wireGauges.value[currentSourceRow.terminal_size] }}

I assume "terminal_size" is the table column header value.

I copied your example verbatim with one difference.
I changed it to point to the table selected row data column in a different way:

{{ wireGauges.value[table1.selectedSourceRow.terminal_size] }}

So it works to provide the drop-down values to the terminal size; the table wire gauge values disappear if I point to a different row with a different terminal size value (because mine points to the selected row in the table).

[rh25170]

@cz0840 ,

You might want to try using currentRow instead of currentSourceRow. I'm not entirely sure why currentSourceRow isn't working in your case—if you're open to it, would you be able to share a .zip of your project? I'd be happy to take a closer look and help troubleshoot. Feel free to send it privately if that’s more comfortable. Of course, if you’d rather not share it, that’s totally understandable.

One thing to note is that table1.selectedSourceRow updates dynamically based on the selected row. For example, suppose you start with the following:

terminal_size, wire_gauge
20, 20

If you then select a different row—for instance, one where terminal_size is 22—the wire_gauge field may automatically default to the first available option in its dropdown. As a result, even without directly changing wire_gauge, the data might appear as:

terminal_size, wire_gauge
20, 26

To prevent this, the option list for the wire_gauge column should be configured to reflect values specific to each row, rather than relying on the selected row in the table. You may need to experiment a bit to get the desired behavior.

Let me know if you'd like help testing anything!

[cz0840]

Unfortunately, I have too much time invested with my plan B to try and work out a solution (if there is one). Albeit clunky, with some back-end code to compile unique drop-down values, it does work. All I had to do after was to provide a GUI feedback prompt if the user chose any of the unsupported values for a particular terminal size.

In the meantime, after 8 months programming tools within the retool app, I must admit that I'm slowly mastering this tool, always pushing the boundaries on what it can do.

I will have another shot at this with a future parent tool (that uses this data) later this year that will require the same level of functionality. I will swing back in a couple of months from now and ask again for help.

Thank you for your support.