I need to hide a container after some code is completed.
I have tried this which doesn't work.
await SaveChangesInvoice03.trigger();
await DeleteInvoices02.trigger();
await RestoreInvoices02.trigger();
await container2.hidden.true.trigger(); (this doesn't work.
I have attached a screen capture.
Any thoughts?
Mike
You need to set the container's Hidden property to some dynamic value.
There are a number of ways to do this and the right way will completely depend on your app.
Here is an example with a temp state var, but not the best way to do it.
await SaveChangesInvoice03.trigger();
await DeleteInvoices02.trigger();
await RestoreInvoices02.trigger();
containerHidden.setValue(true)
The best way is to use some property or value in one of your other components that will naturally be in a particular state when the container is visible or hidden.
Like maybe {{tblInvoices.changeSetArray.length === 0}}.
This is a very important part of the Retool way of doing things. There really are no component.setHidden(true) type of functions. You set them up to be reactive - they automatically behave according to your app's context. You can add references of javascript in nearly any property you can type into or any where you see an fx.
Brad:
You mentioned adding JavaScript. Is there any way of adding JavaScript somewhere to deal with this?
Mike
No really, there is no code that can directly set a component to hidden, you have to do the Reactive way.
You can add JS to many properties of the component as a way of dynamically setting the properties value or state.
We've outmaneuvered you on this with a new feature @bradlymathews!
There is actually now a .setHidden() JS method for this that was added in January 2023 to directly control a component's hidden property:
Oh, well nice. It is not showing up in Intellisense for me. I am using the Beta editor.
I can't get this to work.
I am including 2 screen captures to show what I have done.
When the code runs, the container2 square continues to show.
Mike
Simple typo: setHidden <> SetHidden.
Open the Debug Tools in the lower right of the window:
And you will see the error:
Also, a small toast should have popped down from the top with the error:
Alex:
Can you look at my reply to Bradley.
I am applying "SetHidden" to a container and it is not working.
Mike
Bradly:
You have introduced me to the DeBug button which I have not seen before.
Yes, you are right "SetHidden" is not a function that works with a container.
I have asked Alex to look at this.
Mike
What Brad is saying here is that the function is case sensitive. The error message of “container2.SetHidden is not a function” is accurate, the function name has a lower case s and is ‘.setHidden()’
Alex:
It works !!
Changing the case made all the difference.
Thank you so much.
I will mark this as the solution.
Mike
