[SalesForce] Override Save Button in Lightning Modal

My goal is to override the save button to call out to an external service synchronously. I understand I have to create a custom VisualForce page or Lightning component (I'm going to use the latter). My question is: how do I simply extend or re-use the existing Lightning modal that's displayed when one clicks the edit button? I'd rather not rebuild it, if possible. Or, if I have to, can I re-use existing components to rebuild it cheaply? Why doesn't Salesforce offer a straightforward way to accomplish this?

Best Answer

They sort of provide a way for you to do this, but you have to rebuild it.

It's called the lightning:overlayLibrary found here.

You basically have to dynamically create a modalBody and modalFooter and pass it into their overlay framework and it will render on the screen for you. It's all up to you to handle the styling and wiring of the button clicks.

Keep in mind that when overlayLibrary creates body and footer they will sit outside of the component hierarchy from the calling component (the one creating the modal) and body/footer will be siblings, meaning you need to communicate between them via app events OR wire component.getReference() between the two.

Because it's so time consuming to deal with dynamically creating modals all the time, I actually put this in a library on my github repo here. I still recommend you comb through the official documentation to understand why it is the way it is.