How to collapse layouter element, when repeater inside of it is empty?

Ask the community
1

Hi guys, another question to this super helpful community here :slight_smile:

I am working on a dynamic item page in editor x. I have a Layouter and each of the Layouter elements contains two boxes. One of these boxes has a repeater inside of it. The repeater is connected to a dataset and displays filtered information of the dataset. I want to collapse the entire Layouter element if the repeater has no data to display.

Does anyone of you know, how to achieve this?

Tried different codes but none seem to work. For example this one here.

$w.onReady(function () {
   $w("#repeater1").onItemReady(($w, itemData, index) => {
      if (index === 0 && !$w("#repeater1").data.length) {
          $w("#layouter1").collapse();
        }
   });
 });

Or a more complicated one:

$w.onReady(function () {
   // Get the repeater and layouter elements
   const repeater = $w("#repeater1");
   const layouterBox = $w("#layouterBox1");
 // Function to check if the repeater has any data
 functioncheckRepeaterData() {
      if (repeater.data.length === 0) {
        layouterBox.setProperty("display", "none");
      } else {
        layouterBox.setProperty("display", "");
      }
    }
// Call the function each time the repeater is ready 
repeater.onItemReady(($item, itemData, index) => {
     checkRepeaterData();
});
// Call the function once on page load
checkRepeaterData();
});

Thanks a ton!

2

Hey!

You might have a little more luck in the Velo forum - https://community.wix.com/velo/forum/coding-with-velo

As far as I know, the setProperty isn’t available on layouters. You’d usually use .expand(), .collapse(), .show() or .hide()

Hopefully the Velo forum will be able to help you. :slight_smile:

3

Thx Noah. I reached out there. Let’s see!