I have an lightning application in which I am eventually going to have multiple modal popups being fired from various location in the app. I want to make a generic modal component that will serve as the structure for all of them instead of making lots of different modals with duplicate code. For now, I have just one popup with a save button at the bottom which will fire the save method and a cancel button which will close the modal. Currently, I have a structure like this:
<c:modalCmp >
<c:my_modal />
<c:/modalcmp>
and inside my modalCmp I have:
<div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-hide" aura:id="modaldialog">
<div class="slds-modal__container modalSpacing">
<div class="slds-modal__content slds-p-around--medium">
{!v.body}
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--hide" aura:id="backdrop">
</div>
Now, inside the my_modal component, I have the details of the specific modal I want and the generic shell uses the body to populate it. The issue here is that some Modals, like the one I am making require the save and cancel. In order to save, i'll need to be inside the specific component to get and save the data. And it order to press cancel, ill need to be inside the generic modal to access the close method. Additionally, the way i have seen to close a Modal in salesforce is something like this:
toggleClassInverse: function(component,componentId,className) {
var modal = component.find(componentId);
$A.util.addClass(modal,className+'hide');
$A.util.removeClass(modal,className+'open');
},
Where it simply hides it. This works well until I need to do actions on inputted data and then press cancel, in which it keeps what ever I have typed in. Now i'm having to clear my attributes on close of the modal. So my question is, is there a good way to make this generic Modal component?
Thanks
Best Answer
I have implemented something like this. Here is the code :
My modal component which will contain the other component. You will see that this modal take the name of another component as parameter. This is because it will load the other component within itself :
This component in fact share some variable with the other component which will load inside this one. And then when you click on the save button, from the modal, this will trigger an action on the child component which will execute.
Here is the controller :
Now the child component will have some shared attributes defined. Here is the code for the child component. You will have to readapt it :
I removed much of the thing. But which is important it to implement the handleSave action in your child component. To close the parent modal, just set the variable triggerClose to false.