Ability to programmatically set the hidden field of any component

💬 Feature Requests
1

Every component has setValue() method. A setHidden() attribute will help dynamically alter the UI, show notifications, banner and a lot of use cases.

2

Hi @goku! We actually plan to launch setHidden as soon as this week. Stay tuned!

1 Like
3

image
image761×93 14.8 KB

longest week ever? :smile: just kidding, but is this still planned?

1 Like
4

Hi @G1ofG3 setHidden has launched :slightly_smiling_face: It should be available for many components:

1396×978 113 KB

In doing some testing, it looks like there may be some exceptions, such as the table. In this case, my recommendation would be to use a container around the table, which can be used with setHidden.

Which component are you looking to set to hidden?

5

I see, I've tried this yesterday at the alert component, there its not available for example. And the question was if its possible to add this to all components.

So is there a list where its available and where its not ?

6

Hi there!

I looked into this internally. It looks like we added .setHidden for all of our newer components, but some of the components that have not been recently updated still don't have .setHidden. This at least includes: JSON Editor, JSON Explorer, Button Group, Alert, Cascader, Checkbox Tree, and Rich Text Editor. You can check the components page under Methods to confirm whether a component is compatible, or you can see if the method comes up in auto-complete in the JS query editor. We have a feature request on file to go back and add it to all components. I'll post here when that request is completed.

In the meantime, here's another workaround if you don't want to use containers!

1 Like
7

Hi @Tess
I have tried unhiding the keyValue component in the retool using the script like keyValue1.setHidden(false). But its not working. The confusion is we have two different keyValue components in the updated retool version. The previous Keyvalue component is not working with the setHidden function. Can you please help me in here

8

Hi @Jyothi,

The legacy key value component doesn't have support for .setHidden :disappointed: but the new key value component does! Any chance you can swap out all of your key values to the new key value component?

Otherwise, I'd recommend putting the legacy key value component into a container with no padding, margins, or header

9

Hello Tess!

Quick question, the alert component has .setHidden? I'm trying to use it on a javascript query after a trigger, but is not working.

10

Hi @Lucia_Gomez,

The alert does not have .setHidden yet (it's due for an update!)

I'd recommend putting it in a container and setting the container to be shown or hidden

1 Like
11

Thanks for your answer!!!

12

Hi @Tess ,

Currently the setHidden functionality would work for a table, but there is no way to use it for a column within a table correct? Any idea how I could dynamically set a column property to be hidden other than the hidden field within the table itself?

13

Correct. You can still make it dynamically hidden using some dynamic value in {{}}

For example, you could show/hide with a switch toggle:

You could use a variable to manage the hidden state. Variables can be changed using .setValue