How to collapse a 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.

I tried this solution here as well, but didn’t work.

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!