How to pass a label in lightning:buttonMenu

Question

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

Answer 1

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.

Answer 2

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