Dropdown Button with mapped options, how to tell which option was clicked?

Hello folks. I'm using a Dropdown Button with mapped options coming from a datasource. Since I'm not using manual options, I can't set an event handler to each option, also I can't get which button was clicked if I add a component event handler - or at least I couldn't find how to do that.

Help is much appreciated!

Hey @hetote! Are you looking for something like triggeredById perhaps?


There is a feature request for fixing this issue here: Dropdown Button should save previously selected option

What I have figured out is the dropdown button assigns "item" to the mapped object that is selected. So here you can see I have my array of objects with names and color keys. Then I have a script the console log the "item.color".

1 Like

However, there is this annoying error that persist.

Hello @Michael_Wiskow!

Apologies for the linting error, does it prevent the 'Run Script" event on option click from working?

Are the mapped values in dropdownButton1 fetched in a query and then mapped over?

Can you share a screenshot of you inspecting the dropdownButton1 component and the steps on how you set it up so I an try to reproduce the linting error to log for a bug fix?

It doesn't prevent the script from running. The mapped values come from a variable. In the screenshot you can see it in the jsonEditor1.

I can recreate this in a new project by making a variable equal to some array like [{name:"red"},{name:"blue"},{name:"green"}]
Then drag in a new dropdown button and assign the Mapped Data Source to the variable.

@Michael_Wiskow thank you for the detailed response!

I was able to reproduce the faulty error message as well. Will report this to our eng team to see if they can get the linter sorted out so it doesn't trigger the red warning/linter error.

If the script is able to still run you should be fine to ignore the error message for now. Let me know if the false alarm has any other impact on how the component/app works!