Change state of a multi-state box based on which item you click on a repeater

Ask the community
,
1

image
image1028×517 18.9 KB

I’m fairly new to velo, and I feel like what I’m trying to do is probably very simple, but I cannot figure it out for the life of me. I’ve tried videos and various posts across the forum here, but I’ve yet to find something that has worked for me.

I have a repeater that’s populated by a list of names (numbers right now) through CMS. I will set up the multi-state box below to have a state and content for each corresponding name in the repeater.

What code can I use to make it so that when I click box 1 in the repeater, the box changes to state 1, when I click box 2, it changes to state 2, etc? I dont have any code on the page right now.

Any help is appreciated.

Thank you

2

You can roughly do this:

3

Thanks for the info!

Would you be able to give an example code block? I feel like I’m halfway there but cant quite figure out how the item ids are determined.

4

SIMPLE EXAMPLE-CODE-SKELETON:

$w.onReady(()=>{
    $w('#repeater1').onItemReady($i, iData, index(e)=>{
        $i('#repeatedButtonIDHere').onClick((e)=>{
             console.log(e.target.id+'-clicked');
             console.log(iData);
        });
    });
};
5

Are you referring to the internal _id fields that the Repeater expects each item to have or the element IDs that refer to elements on the screen?

If it’s the Repeater _id then those should already exist when passing in items since the items are coming from the CMS and you shouldn’t need to worry about those. But if you are having some difficulty here please share the code.

For element IDs when you click on an element in the editor you’ll notice a properties panel that has the ID for that element.

image
image748×614 29.6 KB

That ID is what you’ll reference in $item() when using a Repeater’sonItemReady (or forEachItem) function. So in this example if I had a #button1 in my repeater items then I’d reference it locally to the repeater as $item('#button1') from within onItemReady/forEachItem. If I had a #button1 on a page outside of a Repeater I could reference it globally with $w('#button1').

6

Here’s the code so far. This is my first time ever dealing with javascript, so please bear with me.

import wixData from 'wix-data';

$w.onReady(function () {
  $w("#myRepeater").onItemReady(($item, itemData, index) => {
    $item("#committeeid").text = itemData.title;
    $item('#committeeid').onClick( ()=>{
      console.log(itemData.committeeNumber);
  });
});

  wixData.query('ListofCommittees')
    .ascending('committeeNumber')
    .find()
    .then((results) => {
      if (results.totalCount > 0) {
		console.log("Query Results:", results.items);
		$w("#myRepeater").data = results.items;
      } 
    })
    .catch((error) => {
      console.error(error);
    }); 
});

I’ve successfully gotten the repeater to populate from CMS, get the text box in the repeater to fill with the proper data, and get a console report on the info of which box I clicked.

I’ve done onClick functions on simpler setups before, but Im not sure how to tell it which item I select corresponds to which state.

Thank you

7

You can use the properties and methods available on the multistate box to determine what the current state is and what state to change to. For example these might be useful: