Hiding elements in repeater based on boolean value in DB

Ask the community
, ,
1

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

2

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

3

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

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

5

More info on Global and Repeater Item scope:

6

For people looking to hide CMS entries from repeaters like for example in a portfolio-Spotlight section, check out this solution:

  1. Click on the repeater

  2. In the inspector, go to “CMS connections”

  3. Click “Dataset Settings”

    image
    image432×634 19.8 KB

  4. Go down to “Filters”

  5. Add a filter

  6. Select the field from your CMS with your boolean value.

  7. Select if it needs to be true or false for items to be displayed

  8. Done!

Hope this helps some people stumbling across this old post!

1 Like