HELP! Attempting dynamic update of Select values from AI Output

App Building
1

Goal: I'm trying to present a list of "generated" values for the user in a "Select" component. The available values are, for all intents and purposes, temporary. They don't need to end up in any special long-term storage and will be different for each user as they work though the workflow. The user can regenerate this list at will via a button.

Workflow:

  1. User puts data into some data fields.
  2. User clicks "generate list" button.
  3. Data validation to ensure requisite fields are populated
  4. AI is provided with prompt to generate list.
  5. List Box is cleared of prior values (if any)
  6. List Box is populated programmatically with values provided by AI

Steps: I've tried directly accessing the listbox elements programmatically through something "intuitive" like listBox[0].delete() or listBox.values[0].delete() or listBox.setValues() only to learn that I don't "think in retool" quite yet. None of those options seem to exist. Maybe I'm missing something.

Then I decided to try binding the list box to a "javascript variable" as a data source. That seems to be more of the "retool way". Okay... so I put an array of strings as the default value for the variable named "values". This seems to work "as expected" ["Item 1", "Item 2", et. al.] -- these all show up properly in the select box.

Now, when I try to CHANGE that variable programmatically, I get different errors depending upon where I try to access it.

  • If I use a button click handler to update the "variable" (at least that's what the code window calls it), I'm given the error message in the script window: "Attempting to override 'values' which is a constant." -- oh! So, it's a constant now? :confused:
  • If I attempt to update the value (or even READ the value) in the AI Action success event handler, I WAS getting an "I don't know what that value is" error. Now, after closing and reloading the editor window in order to craft this message with all relevant details, I'm getting the same "Attempting to override 'values' which is a constant."

It seems that I just don't understand the "retool way" for this, and I'm finding the lack of "here IS the retool way" type resources to be a bit frustrating, so... please ObiWan... I'd love more insight into the retool way of solving this need. Maybe I'm going down the wrong path. Maybe this just isn't possible in retool (but it sure seems rather fundamental).

1 Like
2

Hello and welcome to the forums!

I think the "Retool way" to accomplish this is with a transformer. These automatically update when the values used within are changed in the app. In your case, it sounds like you want to be able to use the updated data at the push of a button so the first arrangement of logic that I imagine is the button (which you already have defined and working) will trigger the AI to run, the result of which is to be used in the transformer as {{yourAIQueryResult.data}}

The transformer would have the code to format the results into the appropriate array of list items, and then the List Box would use {{yourTransformer.value}} as the data source.

The end result should be that you click the button and your List Box is updated with the latest AI result array.