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?

1 Answer 1


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.

  • Thanks tsalb. Is there a way to have the overlay actually overlay the page instead of redirecting to a blank page?
    – zed917
    Commented Dec 18, 2018 at 17:38
  • @zed593 you need a custom button that calls overlayLibrary that sits on the flexipage itself (so quick actions are automatically out since they create a modal itself already).
    – tsalb
    Commented Dec 19, 2018 at 1:16

You must log in to answer this question.

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