3

I have been trying to open a modal window onclick of a button menu. The modal will be child of the parent lwc and will be hidden. Its passed with some values

<lightning-button-menu class="slds-m-left_xx-small" variant="container" alternative-text="Show menu" icon-name="utility:settings" onselect={handleButtonselect}>
<lightning-menu-item value={topNewsItem.props.header} label="Email" prefix-icon-name="utility:email"></lightning-menu-item>
<lightning-menu-item value="Post" label="post" prefix-icon-name="utility:share_post"></lightning-menu-item>
<lightning-menu-item value="Task" label="task" prefix-icon-name="utility:task"></lightning-menu-item>

@track openEmail;

handleButtonselect(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('here >>'+event.detail.value);
    console.log('label >>'+event.detail);
    var menuValue = 'Email';
    switch(menuValue) {
        case "Email": this.openEmail = true; break;
        case "Post": this.post = true; break;
    }

}

In handleButtonselect how can i know whether email event has been selected or post or anything else. I am trying to create a custom component to email or post, when clicked. Is there a better way ?

  • why are you preventing the event propagation? what is the problem you are facing? event.detail.value should be returning the value of the selected menu item, the same would go for label or name attributes – glls Mar 9 '19 at 19:53
  • I am trying to get what has triggered the select event through the label name. Unfortunately, as i understand, this event has only value parameter. Is there a way to get a label name in my handleButtonSelect – Anshul Agrawal Mar 10 '19 at 6:53
  • @glls event.detailonly has name , interesting, I tried this.template.querySelector to get value, seems its more complex than it seems. – Pranay Jaiswal Mar 10 '19 at 19:13
  • Looks like this same issue is there in react as well , which I think is mostly to do with ES6, i dont think this will be fixed sometime sooner. – Pranay Jaiswal Mar 10 '19 at 19:15
  • @Pranay Jaiswal Other alternative is to out concatenated value in lightning-menu-item value={topNewsItem.props.header} +'$$Email' /> and retrieve the value. But not sure how this is done in LWC. The dom is generated at runtime with dynamic data. To concatenate i need to set it first in js and get the value. This is easily achievable if part of code in in child component and then child component renders to show the value. – Anshul Agrawal Mar 10 '19 at 20:50
3

Why not use for:each and declare the options as List of Objects in JS?

and then on handleButtonselect get the value and do an array search to get your label?

Html:

<template>
    <h1>Hello World</h1>
    <lightning-button-menu class="slds-m-left_xx-small" variant="container" alternative-text="Show menu"
        icon-name="utility:settings" onselect={handleButtonselect}>

        <template for:each={optionsList} for:item="option">
            <lightning-menu-item key={option.value} value={option.value} label={option.label} prefix-icon-name={option.iconName}></lightning-menu-item>


        </template>
    </lightning-button-menu>
</template>

JS:

import { LightningElement , api } from 'lwc';

export default class SelectList extends LightningElement {

    @api optionsList = [{value : 'email' , label :'emailLabel' ,iconName : 'utility:email'} , {value : 'Post' , label :'postLabel' , iconName : 'utility:share_post'}];

    handleButtonselect (event){


        console.log(event.detail.value);

        let selectedValue = event.detail.value;
        let selectedObject  = this.optionsList.find(function(element){
                    return element.value === selectedValue;
        });

        console.log('selected Label ->' + selectedObject.label);

    }
}
-1

@Pranay , thanks. This is ok. But i need to have a custom value in lightning menuItems, so that on select i can get that custom value. The above is fine when we have static value.

<template for:each={topNewsServer} for:item="topNewsItem">
     <li key={topNewsItem.key} class="slds-item">
     <lightning-tile href="#" type="media">
     <c-account-title accounts-list={accounts} entity-id={topNewsItem.timeline} title-color={accountTitleColor}></c-account-title>
     <lightning-button-menu class="slds-m-xxx-small" variant="container" alternative-text="Show menu" icon-name="utility:settings" onselect={handleButtonselect}>
             <lightning-menu-item value={topNewsItem.props.url} label="Email" prefix-icon-name="utility:email"></lightning-menu-item>
             <lightning-menu-item value="Post" label="post" prefix-icon-name="utility:share_post"></lightning-menu-item>
             <lightning-menu-item value="Task" label="task" prefix-icon-name="utility:task"></lightning-menu-item>
     </lightning-button-menu>
     <p class="slds-truncate" title="">
         <span>
         <!-- passing property to child-->
             <c-relative-date-time epoch-date={topNewsItem.props.epoch}></c-relative-date-time>
          </span> via <span>{topNewsItem.props.domain}</span>
     </p>
     </lightning-tile>
     </li>

I need the value to be different so that onclick i can get the dynamic value and pass to modal or to childcomponent. I need to understand what i clicked in this case, whether email button or post or task.

  • I added code for same? On button click you get value, label and everything for that lightning-menu-item or am I missing something? can you edit your question to clarify instead of posting as an answer – Pranay Jaiswal Mar 11 '19 at 11:31
  • Thanks Pranay. Your code helps. But i needed dynamic input values. I created a childcomponent just for menu buttons and passed value from the parent and for each input text i appended the value with unique identifier. – Anshul Agrawal Mar 12 '19 at 10:08

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.