With the Salesforce Winter’18 release displaying modal/popup dialogue box is made simple in the lightning components. Most of the developers have come across the use case of displaying popup dialog when a button or link is clicked. Earlier we have to use lightning design system modal tags or other third party java script library to handle this scenario but now lightning components support natively in a single tag with the same level of flexibility. In the modal window, you can display either the static text or content from the different lightning component. Let’s see how to use this component with an example.
You have to use the lightning:overlayLibrary in your lightning component and in the client-side controller use component.find(‘modalLib’).showCustomModal() to create and display the modal where modalLib matches the aura:id on the lightning:overlayLibrary instance.
When the “Show Modal” button is clicked it calls the client-side controller method “handleShowModal” to create and display the modal window.
({
handleShowModal: function(component, evt, helper) {
component.find(‘modalLib’).showCustomModal({
header: “Modal header section“,
body: “Content of Modal window”,
showCloseButton: true
})
}
})
The above example just shows the static text in the modal windows let’s get into more detail of displaying content of different lightning component inside the modal window.
We going to use the $A.createComponent() method to create a component runtime and display it in the modal window.
({
handleShowModal: function(component, evt, helper) {
$A.createComponent(“c:ltngFlowComponent”, {},
function(content, status) {
if (status === “SUCCESS”) {
component.find(‘overlayLib’).showCustomModal({
header: “Flow Window“,
body: content,
showCloseButton: true
})
}
});
}
})
The c:ltngFlowComponent is the another lighting component in the org which contains the visual flow component. If the status of the method is success then the content of the flow lightning component will be displayed in the modal window. In the above example, I’m displaying the visual workflow screen inside the modal window.
This lightning modal component provides flexibility of customizing header, body and footer message. With the single lightning:overlayLibrary instances aura:id you can create different modal windows in the client side controller.
The complete source code of the example is available in the GitHub and you can directly install in your org by clicking the below button.
