Is there an example of using fwOptionClick for fw-dropdown-button in custom app?

[stevemc (Steve McMillen)]

I’m writing a custom app and I’d like to use fw-dropdown-button and trigger a script for each click of the dropdown. I’d like to be able to pass the value of the option to the script.

For example, I have the following dropdown in index.html:

    <fw-dropdown-button color="secondary" label="Choose action">
      <div slot="dropdown-options">
        <option id="1" value="change_start_date" fwOptionClick="ChangeStart(1)">Change start date</option>
        <option id="2" value="chnage_end_date">Change end date</option>
        <option id="3" value="extend_training">Extend training</option>
        <option id="4" value="pause_training">Pause training</option>
        <option id="5" value="Cancel_training">Cancel training</option>
      </div>
    </fw-dropdown-button>

I want to trigger a function for each selection.

This page: Dropdown button (fw-dropdown-button) | Crayons
describes fwOptionClick but no example to invoke it and its not clear to me how.

btw: I want to leave the dropdown on the default choice “Chose action:” as shown:

So basically I want to execute the command and not change the dropdown selection.

[Saif (Saif Ali Shaik)]

@stevemc

Each time user selects an element from the dropdown, the browser will emit fwOptionClick. This means you can add a event listener to it.

theActionElement.addEventListener('fwOptionClick', function actionIt(eventDetails){
   log( `${eventDetails}`) // all event related details
   theActionElement.value; // the value in the current selection
});

Try checking out a tutorial about using crayons and also some sample code used in the tutorial.

[shravan.balasubraman (Shravan)]

@stevemc

Hey Steve. As @Saif said, you need to add an event listener like this. Just adding a better code snippet here.

There is the same reference in this file as well

Hope this helps

[stevemc (Steve McMillen)]

This solved my problem. Your suggestion in my index.html file just as above works perfectly.

My problem was I was trying to put the same in app.js which for some reason does not work.

function onAppActivate() {
  document.querySelector('fw-dropdown-button')
    .addEventListener('fwOptionClick', (e) => RunCmd(e))
}

function RunCmd(e) {
  var action=e.detail.value
  var training_id=$(e.target.parentElement.parentElement).find('td:nth-child(1)').text()
  console.log('Selected value is', action)
  console.log( "Training ID is", training_id )
}

Any idea why I can’t define this in app.js?

[shravan.balasubraman (Shravan)]

When the app is activated, does the DOM have fw-dropdown-button ? Please check that. Also define RunCmd within the onAppActivate scope or scope above it.

[stevemc (Steve McMillen)]

Thanks for the help, I got this working. Maybe it was something else but the only difference to above is I used a class name for the queryselector