Hi, there is the "hidden" attribute on the form. I can set it to true. But when I want to make form visible form1.hidden=false doesn't show the form.
I don't understand there if method on form object form1.setHidden
but there is no opposite method for showing the form, aka form1.setVisible.
How can I show/hide the form with a button, please?
Thank you
The easiest way to control components like this is to use a Temporary State variable like so:
- Click the '+' icon in the top of the 'Code' panel (lower left side of the screen)
- Choose 'Temporary State'
- You will see a new line appear in the code with the label 'state1'
- Click this variable and in the panel to the right of the 'Code' panel you will load the properties for this new Temporary State variable
- At the top of this new panel you will see the current value for the name of this (state1). Click this name and you will be able to change the variable name -- change the name to 'showForm'
- You are also able to give the variable a default value -- set that default value to: true (no quotes)
- Then click the '+' again and add a new JavaScript Query
- Again a new line will appear in the 'Code' panel (by default this will be something like 'query1')
- Click this new line and again the properties for this will appear in the right panel
- Again click on the name of this JavaScript Query and rename the query -- set it to: toggleFormDisplay
- In the code section of this you will want to write the following code:
// set the display state to be the opposite of whatever the current value is
const displayState = !showForm.value
// reset the temporary state to the new value
showForm.setValue(displayState)
- Now in your form in the hidden field add the following code:
{{ showForm.value }}
- And on your button add an Event Handler for 'onClick' -- set the action of that to 'Control Query' and in the drop down choose the 'toggleFormDisplay' JavaScript Query you created above
Now, when you click the button, it will show/hide the form.
Let me know if that doesn't work (and be sure to include your code/steps so I can help you debug further)
I think maybe you need to use form1.setHidden(false) (visiable) or form1.setHidden(true) (hidden)
I'd like to have the function you have described, but for me unknown reasons, Retool doesn't have this crucial functionality.
The workaround [Ron_West] described works
1 Like
Strange, it definitely does have a setHidden function when I look at it. Works on event handlers and in javascript queries.
1 Like
