How to Toggle All Options in List Selector Inside Repeater When "All" Is Selected in UI Builder?

OscarZ
Tera Expert

Hi everyone, I'm working on a use case in UI Builder for a workspace experience, and I need help implementing a toggle behavior for a list selector inside a repeater.

Setup:

  • I have a left column that contains a repeater.

  • Inside the repeater, there's a list selector for each category.

  • The options for each list selector are generated via a script.

  • We're using Client State Parameters (CSP) to pass the selected values to various data visualizations.

What I’ve done:

  • I added a new option called "All" to each list selector.

  • The CSP updates correctly when selections change.


The challenge: I want the "All" option to behave like a toggle:

 

  • When "All" is selected, all other options in the list selector component should be selected automatically.

  • When "All" is unselected, all other options should be unselected as well.

I’ve tried using a client script to emit a custom event and manipulate the selection, but I haven’t been able to get the list selector to update correctly — especially within the repeater context.

Goal: Implement a behavior where:

  • Selecting "All" selects every option in the list.

  • Unselecting "All" clears all selections.

Has anyone implemented this kind of toggle logic inside a repeater? Any tips on how to programmatically update the list selector’s selected values or trigger a re-render?

Thanks in advance for any help or ideas!

 

 



 

 

1 ACCEPTED SOLUTION

OscarZ
Tera Expert

Yes, the issue has been resolved. The root cause was the specific component we were using. We initially had a list selector inside the repeater, but it wasn't functioning correctly in that context. Replacing it with a dropdown component within the repeater resolved the problem. Updating the component to one that works properly within the repeater context was the key fix.

View solution in original post

5 REPLIES 5

AyushKumarM
Mega Guru

Hi @OscarZ , Can you please give a SS for this. It will be helpful.

OscarZ
Tera Expert

Yes, of course! Here are a few screenshots to illustrate what I'm seeing in my PDI workspace:

Screenshot 1: No Selection Made In this first screenshot, I haven’t selected any options yet. The list selector is in its default state.

OscarZ_0-1751992603250.png


Screenshot 2: Selecting "ORG A" and "ORG C" Here, I’ve selected two options: "ORG A" and "ORG C". These selections are being passed to the data visualization via the CSP variable "selectedInstitucion".

OscarZ_1-1751992769128.png

Screenshot 3: Using the "All" Option In this screenshot, I’ve selected the "All" option. This passes all available options to both the CSP and the data visualization, as expected.

OscarZ_2-1751992997605.png


Screenshot 4: Deselecting "All" Now, I’ve deselected the "All" option. However, the list selector component doesn’t reflect this change visually. The toggle behavior we’re aiming for—where the component updates to show the current selection—isn’t working as expected.

OscarZ_3-1751993192113.png

 




@Brad Tilton Do you have any inputs on this question or do you know who may be able to help ?

Dibyaratnam
Tera Sage

Is this issue resolved? @OscarZ