Add a filter to Repeater in UiBuilder

[Jonas VK]

Hi all,
I have a question if it is possible to add a filter that can change the results in a repeater. I was either thinking of doing this with the radio buttons or select component.  
The items in the repeater have tags, some only have some have multiple, i want by default that it shows all the items in the repeater and if a filter is selected it only shows the item with the required tag. 

If somebody could help out, or point me in the right direction, I would appreciate it.

[Kirankumar Amba · Accepted solution]

You can filter the data that is being passed to repeaters based on the tags and feed the filtered data to repeaters. 

For eg:

We have nums = [1, 2, 3, 4] in state.Those are being rendered on UI using a repeater. And we have a button to filter and show Odd numbers. On click of that, we can invoke a script that filters the numbers

ie. api.setState('nums', api.state.nums.filter(num => num % 2 !== 0));

Automatically, UI gets updated with filtered data. 

 

Hope this solution helps! 

[Brad Tilton]

Just to add to this, what you're doing in this example is filtering the data before it gets passed to the repeater, which it sounds like will work for you. If you want to display different types of data differently within the repeater you can use the visibility functionality on the components themselves like we did on a couple of LCHH episodes: 

Using the new repeater component in UI Builder
Using the new San Diego features to build an experience

[Kirankumar Amba]

Thanks Brad!

[Jonas VK]

thank you guys for the advice, will try it out!