Tuesday, November 17, 2020

Salesforce Lightning button menu in Lightning Web component(lwc)

 Below is the sample button menu example to get the selected button menu value.

Example:

<template>
   <lightning-card title="Button Menu Example">
      <div class="slds-p-around_medium lgc-bg">
         <lightning-button-menu alternative-text="Show menu" icon-name="utility:settings" onselect={handleMenuItem}>
            <lightning-menu-item label="New" icon-name="utility:new" value="New"></lightning-menu-item>
            <lightning-menu-item label="Edit" icon-name="utility:edit" value="Edit"></lightning-menu-item>
            <lightning-menu-item label="Delete" icon-name="utility:delete" value="Delete"></lightning-menu-item>
         </lightning-button-menu>
      </div>
   </lightning-card>
</template>

JS Code:

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  handleMenuItem(event) {
    console.log("selected menu => " + event.detail.value);
    switch (event.detail.value) {
      case "New":
        // do logic
        break;
      case "Edit":
        //do logic
        break;
      case "Delete":
        //do logic
        break;
    }
  }
}

Output:



1 comment:

  1. I want to pass a record Id to the menu for edit and delete operation, how to implement the same?

    ReplyDelete