How to hide a repeater element depending on a field value?

Ask the community
, ,
1

I’m new to velo and hope someone will be able to help me figure out how to get to the solution I’m looking for.

My page has a repeater connected to a collection; items in the repeater are connected to data. Each instance in the repeater contains the name of a business from the dataset. If the business is a member of the association I want a button under their name that links to their website. If the business is not a member, I want to hide the button.

I used this code to make the buttons go away (yay!) but don’t have a clue what to do next.

let repeaterData = $w(“#myRepeater”).data;
$w(“#button43).hide();

The database has a field with the values “yes” for members and “no” for non-members. How can I query the database to see if the value is yes or no, and then hide the button if it is no?

2

@valeurie Have a look at the onItemReady function. You will be able to do the check for each item in the repeater, something like this where I’m calling your yes/no field “fieldValue”.

$w.onReady(function () {
4  $w("#myRepeater").onItemReady(($item, itemData, index) => {
        if (itemdata.fieldValue === "yes"){
              $w(“#button43).show();
        } else {
              $w(“#button43).hide();
        }
10  });
11});
3

@anthonyb, thanks! That got me going in a productive direction, but I’m not there yet. I’ve checked that the logic and string values work, but this code hides #button43 regardless of the value of itemData . status.

$w . onReady ( function () {
$w ( “#repeater1” ). onItemReady (( $item , itemData , index ) => {
console . log ( itemData . status );
if ( itemData . status === “n” ) {
$w ( “#button43” ). hide ();
} else {
$w ( “#button43” ). show ();
}
});
});

4

@valeurie If …
$w ( " #button43 " ). hide ()
Is inside REPEATER, than use…
$item ( " #button43 " ). hide ()
… instead $w

5

Success! Thank you!

Here’s the code that works:

$w . onReady ( function () {
$w ( “#repeater1” ). onItemReady (( $item , itemData , index ) => {
$item ( “#button43” ). show ()
console . log ( itemData . status );
if ( itemData . status === “n” ) {
$item ( “#button43” ). hide ();
} else {
$item ( “#button43” ). show ();
}
});
});

6

I’m back again with a follow-on. The code above worked to suppress a button in one repeater, but now I need to do the same thing for an additional 6 repeaters. Here’s what I’ve tried so far, without success:

$w.onReady(function () {
$w(“#repeater1”).onItemReady(($item, itemData, index) => {
$item(“#button43”).show()
if (itemData.status === “n”) {
$item(“#button43”).hide();
} else {
$item(“#button43”).show();
}
});

$w(“#repeater2”).onItemReady(($item, itemData, index) => {
$item(”#button51”).show()
if (itemData.status === “n”) {
$item(“#button51”).hide();
} else {
$item(”#button51”).show();
}
});

$w(“#repeater3”).onItemReady(($item, itemData, index) => {
$item(”#button52”).show()
if (itemData.status === “n”) {
$item(“#button52”).hide();
} else {
$item(”#button52”).show();
}
});

$w(“#repeater4”).onItemReady(($item, itemData, index) => {
$item(”#button53”).show()
if (itemData.status === “n”) {
$item(“#button53”).hide();
} else {
$item(“#button53”).show();
}
});

$w(“#repeater7”).onItemReady(($item, itemData, index) => {
$item(”#button56”).show()
if (itemData.status === “n”) {
$item(“#button56”).hide();
} else {
$item(”#button56”).show();
}
});

$w(“#repeater8”).onItemReady(($item, itemData, index) => {
$item(”#button57”).show()
if (itemData.status === “n”) {
$item(“#button57”).hide();
} else {
$item(”#button57”).show();
}
});

$w(“#repeater5”).onItemReady(($item, itemData, index) => {
$item(”#button54”).show()
if (itemData.status === “n”) {
$item(“#button54”).hide();
} else {
$item(”#button54”).show();
}
});
});

7 
$w.onReady(function () {
    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#button43").show();
        if (itemData.status==="n")  {$item("#button43").hide();}
        else                        {$item("#button43").show();}
    });

    $w("#repeater2").onItemReady(($item, itemData, index) => {
        $item("#button51").show()
        if (itemData.status==="n")  {$item("#button51").hide();}
        else                        {$item("#button51").show();}
    });

    $w("#repeater3").onItemReady(($item, itemData, index) => {
        $item("#button52").show()
        if (itemData.status==="n")  {$item("#button52").hide();}
        else                        {$item("#button52").show();}
    });

    $w("#repeater4").onItemReady(($item, itemData, index) => {
        $item("#button53").show()
        if (itemData.status === "n"){$item("#button53").hide();}
        else                        {$item("#button53").show();}
    });

    // .... and so on ......
    //...
    //...
});

Next time → please use → CODE-BLOCK, to show your code in an nicely formated view → like i do!

8

@russian-dima will do, thanks! Did you have a solution for me, in addition to the helpful tip on formatting?

9

Just to clarify, is it one repeater, that is repeated 6 times on the page, or is it 6 unique repeater objects?

If it is one repeater, but repeated multiple times, then the button name doesn’t change for every additional repeater, it is the same.
But you would need to iterate through each of the repeaters in the collection of repeaters displayed.

Eg: something like,
$w.onReady(function () {
$w(“#repeater1”).forEachItem( ($item, itemData, index ) => {
$item(“#button43”).show()
if (itemData.status === “n”) {
$item(“#button43”).hide();
} else {
$item(“#button43”).show();
}
});

10

Thanks! I think your code indexes items contained in the repeater? I have 6 unique repeaters, #repeater1, #repeater2, etc.

My code (see above) works for the first repeater, but not for the rest. I tried replacing .onItemReady with .forEachItem, but that did not work for any of the repeaters.

Do I need to call $w.onReady for each repeater?

11

Thanks for your help! Turns out my original code worked, it was my database that was screwed up.