How to Create a Repeater with a "Zebra" Layout Using the Multi-State Box

Show and tell
, ,
1

Ever wonder how you can manipulate a Repeater to change the layout of specific items inside?

Check out my new tutorial on how to create a repeater with a “zebra” layout by using the multi-state box!

Credit for the idea goes to the amazing @idoh !

Here is the code I used (Make sure the element IDs match the IDs in your code):


$w.onReady(function () {
 
   $w('#repeater1').forEachItem(($item, itemData, index) => {
       if (index % 2 === 0) {
           $item('#multiStateBox1').changeState("even");
       } else {
           $item('#multiStateBox1').changeState("odd");
       }
   })
 
});

**If you decide to populate the repeater using a database, then use the onItemReady() function in the code instead of the forEachItem() function.

8 Likes
2

Useful, helpful, interesting solution. Thanks.

3

:+1:t2:

4

HI @evesilberx thanks for teh super simple explanation. Do you know, if this works also with more than two variations? I’m trying to build one with three different states but am struggling with the state changes to be applied.
Do you maybe have an idea?
Thanks in advance :slight_smile:

5

Oh I just figured it out! Guess it will work also with more items exactly like that. :grinning:

$w.onReady(function () {

    $w('#VCPortfolioRepeater').forEachItem(($item, itemData, index) => {
        const multiStateBox = $item('#PortfolioItemBox');

        // Determine the state based on the item's index
        const layoutIndex = index % 3;
        let stateName;

        switch (layoutIndex) {
        case 0:
            stateName = "Middle";
            break;
        case 1:
            stateName = "Bottom";
            break;
        case 2:
            stateName = "Top";
            break;
        default:
            console.error(`Unexpected layout index: ${layoutIndex}`);
            return;
        }

        // Change to the appropriate state
        multiStateBox.changeState(stateName)
            .then(() => console.log(`Item ${index} set to state: ${stateName}`))
            .catch(err => console.error(`Error changing state for item ${index}:`, err));

    });

});