Hiding elements in repeater based on boolean value in DB

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 ();
}
});
});

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()

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;
   });
 
 

Hi Paul, thank you so much for your help. :grinning:

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 ();
}
});
});
});

More info on Global and Repeater Item scope: