[SalesForce] Pop Up window through buttonMenu Lightning Component

I'm trying to display pop up window by clicking the buttons from button menu.I have two buttons like EDIT/DELETE.

If I click the edit need to display pop up window with record fields.

If I click the delete button need to ask for before the record is deleting.

The below code isn't working please check it once and suggest some ideas

Component's markup:

<aura:component implements="force:appHostable,
                            flexipage:availableForAllPageTypes,
                            flexipage:availableForRecordHome,
                            force:hasRecordId,
                            force:lightningQuickAction"
                access="global" >
    <aura:attribute name="titleMessage" type="String" default="Information" />
    <aura:attribute name="bodyMessage" type="String" default="We have created a generic model component!!" />
    <aura:attribute name="footerButtonDisplay" type="boolean" default="false" />
    <aura:attribute name="bodyComponent" type="String" default="c:LightningModelComp" />
    <aura:attribute name="FooterComponent" type="String" default="c:LightningModelFooterComp" />

    <div class="slds-form-element">
            <lightning:buttonMenu aura:id="overlayLib" alternativeText="Show menu" onselect="{!c.handleMenuSelect}">
            <lightning:menuItem label="Edit"   iconName="utility:edit"   value="edit"/>
            <lightning:menuItem label="Delete" iconName="utility:delete" value="delete"/>
            </lightning:buttonMenu>
    </div>
</aura:component>

JS controller:

handleMenuSelect: function(component, event, helper) {

    var selectedMenu = event.detail.menuItem.get("v.value");
    console.log('selectedMenu-' + selectedMenu);
    switch(selectedMenu) {
        case "edit":
            var modalBody;
            var modalFooter;
            $A.createComponents(
                [
                    [component.get("v.bodyComponent"), { messageBody: component.get("v.bodyMessage"), }],
                    [component.get("v.FooterComponent"), {}]
                ],
                function (components, status) {
                    if (status === "SUCCESS") {  
                        modalBody = components[0];
                        modalFooter = components[1];
                        component.find('overlayLib').showCustomModal({
                            header: component.get("v.titleMessage"),
                            body: modalBody,
                            footer: modalFooter,
                            showCloseButton: true,
                            cssClass: "my-modal",
                            closeCallback: function () {
                                alert('You closed the alert!');
                            }
                        })
                    }
                }
            );
        break;

        case "delete":
            //do delete
            break;
    }
},

Best Answer

You should use salesforce force:editRecord to edit the record, It open default edit action in a popup.

  • For Delete part, you should call the apex method to delete the record
switch(selectedMenu){
    case 'edit' :
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
             "recordId": component.get("v.contact.Id")
       });
        editRecordEvent.fire();

    case 'delete':
    //ToDo : show confirmation message on screen.
    //After that call apex to delete the recordId
}
Related Topic