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
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?– zed917Dec 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).– tsalbDec 19, 2018 at 1:16