Would like a disable feature with buttons

Another feature that would be really good would be a disable feature with buttons when pressed.

Currently users are not sure that they have pushed a button until they see something happening. If there is a delay, there can be confusion.

If there was a feature whereby the button would appear disabled when pressed then the operator would know that they have pushed the button and must wait a few seconds for action.

Mike

You can include js in most if not all component properties.

For example, set the button disabled property set to {{ query1.isFetching }}. There's a lot you can do here.

1 Like

I can't get this to work. I am attaching 2 screen shots.

Mike

pict2

Where query1 equals the query you are executing.

1 Like

Is the event that is triggered by the button called something else besides query1? If it is named query1, you may want to try refreshing

Tess:

This is not what I wanted.

Changing the name of the query gets it to work but it permanently disables the button and changes the color to grey.
I wanted something that would give a short indication that the button had been pressed and then after a second it would return to its normal state.
Possibly this is not available in a web environment.
Mike

Hmm, it should be very temporary - only the length of time that the query is running. Is it a longer query?

1 Like

Tess:

No, it stays on permanently. If I go to another screen and come back to it, the button is still disabled and grey.

Mike

Have you tried reproducing the issue in a minimal example app? 1 button, 1 query.

I have developed a simple app that adds 100 to whatever is in the input box.

I have added the code for:

{{Add100.isfetching}}

to the "disabled" property but I see no disabling of the button.

I am adding a picture of the screen.

Mike

That operation is too fast to see the change, replace it with
await new Promise(resolve => setTimeout(resolve,3000));

I still can't get my mind around this.
I have added the new Promise code to my Add100 code. The Add100 code is part of the Button Disabled property.

This does not seem to work.

A picture is attached.

Mike

lowercase f in {{Add100.isfetching}} ?

Matt:
I got it to work. Thank you much.

I changed the resolve time from 3,000 to 200.

I will be able to use this a lot. Thank you again.

Mike

Matt:
I have just discovered that if the button is black that the temporary color of grey does not show up. It seems to work with a blue background but not with a button with a black background. Is there some way of changing the temporary color so it will be visible with a black button?
Mike

This is not currently supported, but we have a feature request for it!