I am trying to hide 2 elements in the repeater based on the value in the database.
premiumApartments is the boolean field.
The design elements, #text38 and #box91 are still showing in the repeater regardless if the item boolean value in the database is true (ticked) or false (empty).
Please help. Thank you.
$w.onReady(() => { $w("#dataset1").onReady(() => { const item = $w("#dataset1").getCurrentItem(); if (item.premiumApartments === false) { $w("#text38").collapse(); $w("#box91").collapse(); } }); });
More info on Global and Repeater Item scope:
Hi Paul, thank you so much for your help. 😀
I have used your example and change from Global scope to Repeater Item scope. And now the code works.
$w.onReady(() => { $w("#dataset1").onReady(() => { $w("#repeater1").onItemReady( ($item, itemData, index ) => { if (itemData.premiumApartments === true) { $item("#text38").expand(); $item("#box91").expand(); } else { $item("#text38").collapse(); $item("#box91").collapse(); } }); }); });
What you need to do is go through all the repeater items (which has a bunch of elements in it) and test if the datafield is set them true or false, then show()/hide() the element ($item) in the repeater.
In your [$w("#dataset1").onReady(()=>{] section, you will need to add a foreachItem code section. This will go through each repeater section after the data is ready.
I use the code below to set my repeater elements. I put this code in my dataset.onReady() section.
On my repeater, I have a Booking Button. This button is shown if the "textBookEnableFlag" field (which is also on the repeater) is set to 'true'. I hide this field on the repeater, since I don't want to display it, I just need it to be there, so I can check its value. Then based on that value, I either show or hide the Booking Button.
I also format a text cost field by preappending a '$' and postappending a '.00'.
Here is the code snippet where I iterate (walk through) each repeater section.
$w("#repeater1").forEachItem( ($item, itemData, index ) => { // format the cost field $item("#textCost").text = '$' + $item("#textCost").text + '.00'; // check if we are hiding the book button if ($item("#textBookEnableFlag").text === 'false') { $item("#buttonBook").hide(); } else { $item("#buttonBook").show(); } $item("#buttonBook").label = $item("#textBookButtonLabel").text; });
I'm not sure of .collapse, but I have used .hide() to hide an element in a repeater, and then when I want to show it, i use .show()