Toggling the Visibility of a Repeater Component in UI Builder Using a Button

rt_kaneko
Tera Contributor

Currently, I am trying to implement a feature in UI Builder that allows toggling the visibility of a specific Repeater component using a button.

Specifically, I want to achieve the following requirements:

  • When the button is clicked, the Repeater component is hidden.
  • Clicking the button again makes the Repeater component visible (toggle between visible and hidden states).

Steps I have tried so far:

  1. I bound the Repeater’s Component Visibility to a Client State Parameter (isVisible1), configuring it so that the Repeater is hidden when the value is True and visible when the value is False.
  2. I set an Update client state parameter event for the button and wrote the following script to toggle the value:

 

function evaluateEvent({api, event}) { return { propName: "isVisible1", value: !api.getState("isVisible1") }; }

Current Situation:

  • The Repeater component is successfully hidden on the first button click (even without applying the above script).
  • However, I cannot make it visible again with subsequent clicks.
  • I suspect that the above script is not appropriate for this use case.

What I would like to know:

  1. If there are any mistakes or missing steps in the above implementation, what should I fix?
  2. Is there a way to achieve this visibility toggle functionality using the standard features of UI Builder?
0 REPLIES 0