Use an Event Handler to Control Component's data

Hey guys,

Thanks in advance! Not sure what I'm doing wrong, maybe it's just a syntax thing. Anyway - I have a button, and when it's clicked I want it to change a container Tab to have selectedIndex of 0. In effect, this would just switch what tab the current tabbed container is showing.

I have tried to use Control Component, and run script (here it is) internalNavBar.selectedIndex = 0 but I'm not sure why anything is working.

Anyone got a simple and good idea? :slight_smile:

Hey, I've been confused by that too before. selectedIndex is only used for reading the value. If you want to update it, you have to call the setCurrentViewIndex method.

In your case:

internalNavBar.setCurrentViewIndex(0)

1 Like

Hey there! Thanks. That's not working for me.

I have it in a click handler on a button using the Run Script event handler, and it does nothing when clicked. Any idea why?

Screen Shot 2022-05-17 at 7.49.37 pm

Can't see any method similar to setCurrentViewIndex?

It seems you're putting this code in a transformer. You have to use a JavaScript query with the following code inside (no {{ }}):

internalNavBar.setCurrentViewIndex(0)

Another option is to directly control the component from where you set the even handler. Just select Action to be Control component:

1 Like

This worked. I had to target the container instead of the navBar itself. Thank you so much! SOLVED.

1 Like

Oh, I thought internalNavBar was the id of the tabbed container. Glad to hear it worked :slight_smile:

1 Like