Flashing success/failure visual feedback on table change

App Building
1

With a semi-complicated retool app with potentially many different tables of information, it would be nice to see which tables were updated after a query finishes with some sort of a color flash.

Currently, I'm achieving this by setting every column in my table's background color to a variable then writing a js success function like this:

TableColor.setValue('#03fc49')
setTimeout(() => {
	TableColor.setValue('')
}, 1000)

Could we have a method available for table components called flashSuccess or flashFailure?

Is there a better way of achieving what I'm trying to do?

Thanks

1 Like
2

Hi @john! Neat setup there! It does trigger the loading animation each time the table data updates, but this workaround makes all of the values in the table change colors for 1s after each time the table data changes?

3

Yeah that’s right. While the auto animation does fine for an app or view with only one table, if you happen to take an action which influences different tables, it’s very hard to see.

Alternatively, this janky code snippet which is added as a success callback to all these functions could be replaced by a single js query. This would require that js queries accept parameters however, which is not an available feature.

4

You mean using the JS queries as global functions like jsQuery(table.data)? You can define helper functions like here, but they aren’t able to change other properties in the app model like .setValue() for example.

What kind of parameter would it need to accept? If this is to target the background color temp states of a specific table, triggeredById does return the name of the component which triggers a query. If the table triggers that JS query first that could be useful?