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.
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:
For people looking to hide CMS entries from repeaters like for example in a portfolio-Spotlight section, check out this solution:
-
Click on the repeater
-
In the inspector, go to “CMS connections”
-
Click “Dataset Settings”
-
Go down to “Filters”
-
Add a filter
-
Select the field from your CMS with your boolean value.
-
Select if it needs to be true or false for items to be displayed
-
Done!
Hope this helps some people stumbling across this old post!
1 Like