Few months back, I created a single page application to create and edit broker details in a popup. The code for this app is provided in the github link provided in the reference section of this post.
The popup is invoked on click of New or Edit button. This popup gets created dynamically during runtime for which I have created a helper function displayModal.
displayModal : function(component, modalComponentName, modalProperties) {
$A.createComponent(
modalComponentName,
modalProperties,
function(newModal, status, errorMessage) {
if (status === "SUCCESS")
component.set("v.modal", newModal);
else if (status === "INCOMPLETE")
console.log("No response from server or client is offline.")
else if (status === "ERROR")
console.log("Error: " + errorMessage);
}
);
}
This is how the helper function is called on click of New button
helper.displayModal(component, "c:BrokerPopup", {
"broker": {'sobjectType':'Broker__c',
'Name':'',
'Mobile_Phone__c':'',
'Email__c':''
}
});
To exit the popup, I am setting modal attribute of the component to null like below:
component.set("v.modal", null);
References:
Github link: https://github.com/iamsonal/BrokerApp