collapse repeater depending on boolean

Ask the community
,
1

HI! I have amenities list which are setup via dynamic links with booleans to be a yes/no for each. Current setup below, but the client wants to only show amenities which are ticked yes. This would mean there would be gaps if I hide the unticked elements. I could use boxes and collapse them, but I think if there is uneven amenities in each column it will look weird.

Therefore I think repeaters would be the way to go. How would I add the correct data field name (ie air conditioning) to each repeater container, and how do I collapse a repeater container if the boolean isn’t true? Thank you!

1250×1244 140 KB

2

Can anyonre help? @Yisrael?

3

Hi,

Currently, as repeaters are in their early stages, they do not support user input components.
We know that this is requested and doing everything we can make it better :slight_smile:

Liran.

4

Thanks liran . It doesn’t need to accept user inputs, just collapse depending on boolean value?

5

Ohhhh I see… my bad…

Here you can find how to get value from checkbox, here you’ll find collapse/expand.

Liran.

6

Thank you. But how to collapse a repeater container when they dont have individual ids. I know how to check if value is ===true, but if I have different text in each repeater ie air conditioning then barbeque then towels then TV, how do I collapse if boolean isnt true?

7

Use ’ onItemReady ’ for your repeater… for example:
Inside of it’s callback, each element ID refers to the one in the current item.
So, if you have three items in the repeater, each has #text1 and #text2, then for each item, the callback function will run, you just need to adjust the condition, something like:

export function repeater1_itemReady($w, itemData, index) {
const amenityName = itemData.amenity;
if ($w(#checkbox-${amenityName}).value === false) {
// Hide elements in this specific repeater item
$w(‘#text1’).collapse();
$w(‘#text2’).collapse();
}
}

NOTE: i’ve assumed naming for the checkboxes (e.g. ‘#checkbox-aircon’) and fields in database (e.g amenity).

Liran.

8

Thanks Liran. I will try that, but my current method was using:

$w.onReady(function () {
let itemA = $w(“#dataset1”).getCurrentItem().airConditioning;
if (itemA === false) {
$w(“#box116”).collapse();

I can just have the amenities listed with dot points so really no need for the checkboxes unless I have to?

Can I just change to:

export function repeater1_itemReady($w, itemData, index) {
let itemA = $w(“#dataset1”).getCurrentItem().airConditioning;
if (itemA === true) {
$w(“#text1”).collapse();
}
}

9

Should work :slight_smile:

10

But the #text is the same in every container in the repeater? So how can it link to all my different amenities?

11

You need to dynamically get the amenity name from the item data (assuming you have it), something like:

export function repeater1_itemReady($w, itemData, index) {
  const currentItem = $w("#dataset1").getCurrentItem();
  if (currentItem[itemData.amenityName] === true) {
      $w("#text1").collapse();
  }
}

Liran.

12

OK thank you, do I need to do this code for every item then? ie

export function repeater1_itemReady($w, itemData, index) { 
const currentItem = $w("#dataset1").getCurrentItem(); 
if (currentItem[itemData.airConditioning] === true) { 
$w("#text1").collapse(); 
} 
}

then

export function repeater1_itemReady($w, itemData, index) {  
const currentItem = $w("#dataset1").getCurrentItem();  
if (currentItem[itemData.barbeque] === true) {  
$w("#text1").collapse();  
}  }

then

export function repeater1_itemReady($w, itemData, index) { const currentItem = $w(“#dataset1”).getCurrentItem(); if (currentItem[itemData.carNot Essential] === true) { $w(“#text1”).collapse(); } }

etc?

13

My site is http://pete092.wixsite.com/book-the-best and it is the property (Title) dynamic page if you want to have a look. I haven’t started this code yet

14

No, you don’t have to do that.
here:

export function repeater1_itemReady($w, itemData, index) { 
     const currentItem = $w("#dataset1").getCurrentItem(); 
     if (currentItem[itemData.amenity] === true) { 
          $w("#text1").collapse(); 
     } 
 }

I’m assuming that, in the database that is connected to the repeater, you have a field call ‘amenity’, which can be ‘barbeque’, ‘airConditioning’, etc.
Then, ‘currentItem[itemData.amenity]’ will read the corresponding amenity (if the current item of the repeater is ‘barbeque’ than it will be ‘barbeque’).
So you only need this code once, but you need to have the amenities listed in the database that is connected to the repeater.

Liran.

15

Thank you for your patience Liran :slight_smile:

My setup here. Each field is titled the amenity name, so I don’t think this will work?

1920×616 96.2 KB

16

Hi TailoredWebDesign!

I’m trying to do the same thing on my site, did you manage to make the code work? If so, could you share it please? I don’t understand that much yet, so you will help me a lot :slight_smile: