visibility toggling of component visibility not working

[andreadigiu]

hi all,

I ve a page with a form and related list component. the Related list component visibility is mapped to a cliet state parameter that I'm controlling  to test the visibility toggling by two button. One set to true (hide) the seocnd set  it to false (show). Debugging the script shows that the buttons set correctly the CSP to true/false.  When launching the page in "component visible mode"  both if I click one or the other button the List compoent is hidden. If I start the page "not showing the comopenent) there no wya to may it appefar!! Clicking the tetsing button the CSP is set to the rigth value and the CSP is correctly mappend on the hide visibility property (the CSP value is fetched ...I traced that with a script) no way to make the list component to appear!!

Any idea about what I could try?

Thank you 

[wojasso]

Hi @andreadigiu

In UI Builder the Hide component property accepts a boolean value. If you bind a client state parameter whose type is String or if you send the literal string "true"/"false" from your buttons the List component will always evaluate the value as truthy and remain hidden. To make show/hide work there are two key points:

• Create the client state parameter as a Boolean with a sensible default (e.g. false so the list is visible on load).
• Map that parameter directly to the Related list component’s Hide component property (or wrap the component in a container and bind the container’s Hide component property).
• On your buttons, update the parameter using the built‑in Set value action or a small client script so that it is a boolean, not a string.

For example, if your parameter is called showList (with a default value of false) you can toggle it with client scripts on the button click events:

// Hide the list by setting the parameter to true
function hideList() {
  api.updateState({showList: true});
}
// Show the list by setting the parameter to false
function showList() {
  api.updateState({showList: false});
}

The Related list’s Hide component input should then be bound to showList. When the value is true the component is hidden; when the value is false it is shown. Binding to the Hide property avoids the need for inverted expressions and makes the toggling reliable.

If you still see the component stuck in one state, try placing the list inside a Container component and binding the container’s hide property instead — some older versions of the List component do not react correctly to dynamic hide/show bindings.

🔥 Was this answer useful? 👉 If so, click 👍 Helpful 👍 or Accept as Solution ✅ 💡🛠️🧠🙌

[andreadigiu]

Hi wojasso, thank you for your reply, 

unfortunately I did exactly all the things you suggested, even using a layout containar.  ALways the same behaviour, tested and retested lots of times. The state parameter status change seems to cause the component hiding in any case.  Below some screen shost about configurations....

The State parameter bindid to the Related List component (script mode)

the binding config (initially true ) 

the CSP 

the button click event changing the CSP value (ther are two button actually one for true one for false CSP toggling)

When clicking the button nothing happens, on the other side , if the list is initially loaded as visible (true) if I press the click button (set it to  false=visble)  it disappears  and no more visible even changing the CSP toggling it to false again. If I press the button for CSP=true (hide) the same behaviour.

[andreadigiu · Accepted solution]

hi wojasso,, 

thank yuou for your time.

Unfortunately I did exactly (I think) what you suggested.  Teste and retested lots of times. No way.

Below some screen-shots about configurations:

The List Component bind to the CSP, (as a script to log when invoked ,actually invoked when CSP changes):

The script thant bind it  (the undefined check is because the it first laod is undefined probably due to sequence to load:

here is the CSP config (initial state true=hidden)

here is the button click that changes the CSP to false=show (ther are two buttons actually true/false)

When the page loads the List is initially hidden, when presing the test button that set the CSP to false=visible, nothing happens. On the other hand if I  load the list as initially visible,  any of the two test button I press cause the List to hide and no more visibe even pressing  one of the two button again.

Logging on browser console the CSP state works and the CSP is changed. Logging the binding script works, when the CSP is changed the scirpt is inked to change (it shoould) the list hide property. 

Here is the Page with the initial state = list is hidden. I even added a RefreshList CSP binded to the list refresh property, it works for refreshing list items but it does not cause the list to appear even after changing the CSP to false. No way.

[andreadigiu]

hi everybody,

after hours of debugging I should have found the cause. When using the set CSP handler to change the vaue of a BOOLEAN CSP the value set by the form support seems to be true/false but having a look to the script generated the param in the json data is set as "false" or "true" (quoted) as if it was a string causing unpredictable results. The solution is change the script manually,   usong the  value :false/true (not quaoted).