Button disabled by default until condition met

Hi all, a feature that would be super useful for many of my use cases is the ability to set a button as disabled by default until a certain condition is met, at which point the button would be enabled.

I have a scenario where a SQL query runs on a Databricks resource, returns a payload and then 2 chained transformers perform operations on the loaded data. I have a button that I want to be disabled until the final transformer returns an array of length > 0, however all the checks I've tried to include in the disabled option are failing until the final transformer returns a value and is no longer undefined.

This was discussed in the Retool discord server and no firm solution was established Discord

Providing an option for a button to be disabled by default would prevent the need for complicated disabled checks and error handling.

Something like this?

chrome_EH5okiZYhs

Im just using a simple temporary state like so:

for the button disabled section:
{{ myVar.value !== "0" }}

Tempstate is 'myVar'

on change of text input -> store textinput to the tempstate, which then controls the button enable/disable

I only want to enable the button if the length of an array returned by a transformer is > 0 so don't think this would help as you can't set temp state from a transformer and any other checks end up with the same issue as before where the length is undefined and causes an error until the transformer completes.

How about this:

chrome_Vt5hYy58lj

Run the whole thing through a JS query, then you can modify the data etc, and set the temp state:

var data = await query2.trigger()
var formattedData = formatDataAsArray(data)
myVar.setValue(formattedData.length)

And on the button disabled:

{{ myVar.value <= 0 || myVar.value === undefined }}
2 Likes

Or this way, in your transformer:

let array = [];

//transformer magic
//let = [0,1,20]
return array;

and the button disable condition to:

{{transformer1.value <= 0 || transformer1.value == undefined}}
1 Like

@mbruijnpff

how are you referencing the transformer directly? Are you calling the query 'transformer1'?

[EDIT]
It seems that you are, and yea thats much simpler...why didnt i think of that? :sweat_smile:

Yes, it doesn't apply to contracts only, always read the fine print :wink:

This doesn't work for me because the JS snippet errors rather than returning true, meaning error is treated as false and the button stays enabled until the transformer returns a value.

The feature request would save a lot of time and headaches of worrying about at what stage data exists etc as the button would remain disabled at all times unless a condition is met, so you wouldn't need to worry about query loading times, JS run times etc

That’s way I start with let array = [] to define an array, you can then update that variable and return it. If anything goes wrong it will always return an array of length 0 instead of undefined.

My code always returns an array but the code is performing lots of operations so takes 1-2 seconds to return so until it does trying to access a returned array that doesn't exist yet is erroring the JS rather than returning undefined

Hi @Milo Thanks for flagging the Discord convo. I read through it. I can certainly submit a feature request, but I want to make sure I understand how you visualize the feature looking.

Currently, you can set the button to be disabled true by default and then use the setDisabled API to change it later

The limitation with transformers is that you can't trigger any actions from transformers, so it would need to be in a JS query or as an event handler

Or, you can use a dynamic value, which it seems like may not be working for your particular logic :thinking:

Hi Tess, I'm just imagining a button where disabled is set to true by default, and then it has to be passed a value of false to enable it (opposite of current button).

It's probably not how you'd want to implement it but a simple example would be a new component called "Disabled Button" which has a field called "Enabled", and if the enabled field is passed a truthy value then the button can be interacted with, otherwise it is always disabled.

Your suggestion of using a JS query to interact with the button is actually what I've done in my app after struggling with the transformers, however it's not perfect in my use case because the script relies on multiple data sources so I've had to work out when to trigger the JS after the queries resolve rather than it happening automatically with a transformer.

As you say, I could set the disabled value as true but as my code is in a transformer, I have no way of updating the disabled state based on the transformer's value once it runs.

The ability to have my button be disabled by default and then enabled when I pass a value to enable it would save this whole headache and remove lots of complicated logic from multiple use cases like the one discussed on discord.

Thanks, @Milo I've surfaced your feedback internally!

1 Like