3

I have the following component:

<lightning:buttonMenu iconName="utility:thunder" alternativeText="Settings" onselect="{!c.handleselect}">
    <lightning:menuItem label="Edit" value="{!cc.Id}"/>
    <lightning:menuItem label="Delete" value="{!cc.Id}"/>
</lightning:buttonMenu>

JS controller

handleselect: function(component, event, helper){
    let bhold = event.getParam("label");
    let idhold = event.getParam("value");
    console.log("test 1 : " + event.getSource());
    console.log("test : " + bhold + " : " + idhold);
    if(bhold === "Delete"){
        component.set("v.showdeleteModal", true);
    }
}

the lightning button menu is within an aura interation over a series of records.

my question is, how can i pass back both the id and the label, Basically, I would like to pass both "Edit" or "Delete" AND the id regardless of what is chosen

output is bhold is undefined while idhold holds the correct value

  • where is it exactly that you are stuck? – glls Mar 20 '18 at 22:38
  • So, I can pass back the value, but I can't figure out how to pass a 2nd variable to the javascript, basically I want to be able to use the label and the value for the menuitem that they selected in my javascript – Tim Willis Mar 20 '18 at 22:39
  • have you tried using event.getSource().get("v.value") and event.getSource().get("v.label") instead? – glls Mar 20 '18 at 22:47
  • Just did it, its the same outcome – Tim Willis Mar 20 '18 at 22:49
  • your menuItem is inside aura:iteration or menu is inside aura:iteration? – Manjot Singh Mar 21 '18 at 3:39
6

Unfortunately, this event has only value parameter. So if you need more, you have to pass more in this parameter. This looks a bit dirty but will pass label to your controller:

<lightning:buttonMenu iconName="utility:thunder" alternativeText="Settings" onselect="{!c.handleselect}">
    <lightning:menuItem label="Edit" value="{!join(',', cc.Id, 'Edit')}"/>
    <lightning:menuItem label="Delete" value="{!join(',', cc.Id, 'Delete')}"/>
</lightning:buttonMenu>

So here in your value parameter, you will have a string with your cc.Id and label separated by a comma.

handleselect: function(component, event, helper){
   let parcedValue = event.getParam("value").split(',');
   let value = parcedValue[0];
   let label = parcedValue[1];

   console.log("value : " + value);
   console.log("label: " + label);

}

Also as I can remember let does not work in Firefox browser so you might want to use var instead.

| improve this answer | |
1

The approach from 'Oles' would work just fine. However, if you are looking to retrieve all the attributes of the selected menu item such as "label", "title", "value" and if you want a generic approach to all the other attributes that you may assign in future. Here is a way.

An ideal way is to use event.getParam() like you have used for getting the value event.getParam('value'). But event.getParam('label') or event.getParam('title') does not work as we expected it to. It throws undefined.

Hence we will have to work-around the issue. We can use event.getSource() to determine the attributes of the lightning:menuItem that was selected. We can determine the associated attributes of the selected value ( event.getParam('value') by iterating through the v.body of the menuItem.

Component

<aura:component implements="force:appHostable" access="global">
    <lightning:buttonMenu iconName="utility:settings" alternativeText="Settings" onselect="{!c.handleMenuSelect}">
        <lightning:menuItem label="Font" value="font" title="My Font" />
        <lightning:menuItem label="Size" value="size"  title="My Size" />
        <lightning:menuItem label="Format" value="format"  title="My Format" />
    </lightning:buttonMenu>
</aura:component>

Controller

({
    handleMenuSelect : function(component, event, helper) {        
        console.log(helper.getAttributes(event));        
    }
})

Helper

({
    getAttributes : function(event) {
        var source = event.getSource().get("v.body");
        var selected_value = event.getParam("value");
        var attr = {};

        if(selected_value && source.length > 0){
            for(var i=0; i<source.length; i++){
                var elements = source[i].attributes.values;
                if(elements.hasOwnProperty('value') && elements['value'].value === selected_value){
                    for(var k in elements){ attr[k] = elements[k].value; }
                }
            }
        }

        return attr;
    }
})

Sample Output

Sample Menu Item

| improve this answer | |
  • This is a really creative way to do this, thankyou for your insight! I picked the other answer though because I think it’s simpler and fits more scenarios. – Tim Willis Mar 22 '18 at 0:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.