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!
![](https://static.wixstatic.com/media/a27d24_cd7d509daa04423b9a4e13b77498a55d~mv2_d_1250_1244_s_2.png/v1/fill/w_980,h_975,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a27d24_cd7d509daa04423b9a4e13b77498a55d~mv2_d_1250_1244_s_2.png)
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 :)
Thank you for your patience Liran :)
My setup here. Each field is titled the amenity name, so I don't think this will work?
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.
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
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?
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.
But the #text is the same in every container in the repeater? So how can it link to all my different amenities?
Should work :)
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();
}
}
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.
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?
Ohhhh I see... my bad...
Here you can find how to get value from checkbox, here you'll find collapse/expand.
Liran.
Thanks liran . It doesn't need to accept user inputs, just collapse depending on boolean value?
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 :)
Liran.
Can anyonre help? @Yisrael?