1

I have a component which consist of input fields. On closing the component, another component pops up to ask for confirmation to close the component. If the user clicks on 'do not exit' then it should navigate back to the input form component in the same condition as it was left. It should show the fields that were already filled before clicking exit. How can I achieve this?

1
  • Welcome to SFSE. Please take a tour of the site guidelines and visit How to Ask. Provide details on what you have tried so far and where you are stuck, in order to get better answers.
    – arut
    Jan 6, 2021 at 11:17

2 Answers 2

2

So I'd say the issue here is that you're talking about navigating to the popup and navigating back to the input component. No navigation should really take place, the confirmation component should just go from not being rendered to being rendered.

<template>
  <c-my-input-component onclose={handleClose}></c-my-input-component>
  <template if:true={showConfirmation}>
    <c-my-overlay-component onconfirm={handleConfirm} oncancel={handleCancel}></c-my-overlay-component>
  </template>
</template>

handleClose(evt){
  this.showConfirmation = true;
}
handleConfirm(evt){
  this.showConfirmation = false;
  // next steps here
}
handleCancel(evt){
  this.showConfirmation = false;
}

Note how the input component and overlay are within the same wrapper. The overlay just isn't rendered unless the value of showConfirmation is true.

The alternative would be just to use a javascript prompt like so:

handleClose(evt){
  if(prompt('Are you sure you want to close this?){
    // next steps here
  }
}

This will accomplish what you describe if less pretty.

0

I was able to use the code from this developer forum thread and implement a simple overlay implementation that on cancel had the input values can you try checking it:

  1. Create one Application Event :(Name as OverlayLibraryModalEvent)

    <aura:event type="APPLICATION" description="Event to handle overlay Action" > <aura:attribute name="message" type="String"/> </aura:event>

  2. Create the Overlay Component :(Name as OverlayLibraryModal) ==> This will hold the OK and Cancel button

Here am passing the string as which button getting clicked to parent component via Application event

<aura:component access="global">
    <aura:registerEvent name="appEvent" type="c:OverlayLibraryModalEvent"/>
    <lightning:overlayLibrary aura:id="overlayLib"/>
    
    <!--Component Start--> 
    <div class="slds-text-align_center slds-m-around_x-medium">
        <lightning:button name="cancel" label="Cancel" onclick="{!c.handleCancel}"/>
        <lightning:button name="ok" label="OK" variant="brand" onclick="{!c.handleOK}"/>
    </div>
    <!--Component End-->
</aura:component>

OverlayLibraryModal JS:

({
    handleCancel : function(component, event, helper) {
        //closes the modal or popover from the component
        var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
        appEvent.setParams({
            "message" : "Cancel" });
        appEvent.fire();
        component.find("overlayLib").notifyClose();
    },
    handleOK : function(component, event, helper) {
        //do something
        var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
        appEvent.setParams({
            "message" : "Ok" });
        appEvent.fire();
        component.find("overlayLib").notifyClose();
    }
})
  1. Parent Comonent : (Component which hold the initial submit button)

Once you have recievd the which button clicked msg then do the further operation handleApplicationEvent method

<aura:component  implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
    <!--Declare Attribute-->
    <aura:attribute name="FirstName" type="String"/> 
    <aura:attribute name="LastName" type="String"/> 
    
    <aura:handler event="c:OverlayLibraryModalEvent" action="{!c.handleApplicationEvent}"/>
    
    <lightning:overlayLibrary aura:id="overlayLib"/>
    
    <!--Component Start-->   
    <div class="slds-m-around--xx-large">
        <lightning:input name="fname" label="First Name" value="{!v.FirstName}" />
        <lightning:input name="lname" label="Last Name" value="{!v.LastName}" />
        <br/>
        <lightning:button variant="brand" label="Show Modal" onclick="{!c.handleShowModal}"/>
    </div>
    <!--Component End-->
</aura:component>

Parent Comonent JS:

({
    handleShowModal: function(component) {
        var fName = component.get("v.FirstName");
        var lName = component.get("v.LastName");
        $A.createComponent("c:OverlayLibraryModal", {},
                           function(content, status) {
                               if (status === "SUCCESS") {
                                   var modalBody = content;
                                   component.find('overlayLib').showCustomModal({
                                       header: "Hi " + fName +" "+ lName + " Please let us know your confirmation!!!",
                                       body: modalBody, 
                                       showCloseButton: false,
                                       closeCallback: function(ovl) {
                                           console.log('Overlay is closing');
                                       }
                                   }).then(function(overlay){
                                       console.log("Overlay is made");
                                   });
                               }
                           });
    },
    
    handleApplicationEvent : function(cmp, event) {
        var message = event.getParam("message");
        alert('@@@ ==> ' + message);
        if(message == 'Ok')
        {
        // if the user clicked the OK button do your further Action here
        }
       else if(message == 'Cancel')
      {
        // if the user clicked the Cancel button do your further Action here for canceling
      }
    }
})

can you check this once?

1
  • The question asked for LWC, and you gave an answer in Aura.
    – stackasaur
    Jan 6, 2021 at 14:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .