In this blog, I am going to show how to use the lightning:overlayLibrary component. with the lightning:overlayLibrary you will be able to display in modals and popovers format. Modals display a dialog in the foreground of the app, interrupting a user’s workflow and drawing attention to the message. Popovers display relevant information when you hover over a reference element.Include one overlayLibrary aura:id=”overlayLib”/> tag in the component that triggers the messages, where aura:id is a unique local ID. Only one tag is needed for multiple messages.
Modals
A modal blocks everything else on the page until it’s dismissed. A modal must be acknowledged before a user regains control over the app again. A modal is triggered by user interaction, which can be a click of a button or link. The modal header, body, and footer are customizable. Pressing the Escape key or clicking the close button closes the modal. To create and display a modal, pass in the modal attributes using component.find(‘overlayLib’).showCustomModal(), where overlayLib matches the aura:id on the lightning:overlayLibrary instance.
Popovers
Popovers display contextual information on a reference element and don’t interrupt like modals. A popover can be displayed when you hover over or click the reference element. Pressing the Escape key closes the popover. The default positioning of the popover is on the right of the reference element. To create and display a popover, pass in the popover attributes using component.find(‘overlayLib’).showCustomPopover(), where overlayLib matches the aura:id on the lightning:overlayLibrary instance.
Example
Here is the simple form that will display as the modal on click. On click of the Edit button on AccountList.cmp this component will display as the modal
AccountEdit.cmp
<aura:component >
<aura:attribute name="disabled" type="Boolean" default="false" />
<aura:attribute name="recordId" type="String" />
<lightning:overlayLibrary aura:id="popuplib"/>
<lightning:recordEditForm onsubmit="{!c.handleSubmit}"
onsuccess="{!c.handleSuccessMessage}"
recordId="{!v.recordId}"
objectApiName="Account" aura:id="editForm">
<!-- the messages component is for error messages -->
<lightning:messages />
<lightning:inputField fieldName="Name" />
<lightning:inputField fieldName="Type" />
<lightning:inputField fieldName="Rating" />
<lightning:inputField fieldName="Phone" />
<lightning:inputField fieldName="Industry" />
<div class="slds-m-top_medium">
<lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
</div>
</lightning:recordEditForm>
</aura:component>
({
handleSubmit : function(component,event,helper) {
component.find("editForm").submit();
},
handleSuccessMessage : function(component,event,helper) {
component.find('popuplib').showCustomPopover({
body: "Account Is Updated",
referenceSelector: ".mypopover",
cssClass: "slds-popover slds-nubbin_left"
}).then(function (overlay) {
setTimeout(function(){
//close the popover after 3 seconds
overlay.close();
}, 3000);
});
component.find("popuplib").notifyClose();
},
})
The below code from the AccountEdit.cmp will display as Popovers on save of the form.
component.find('popuplib').showCustomPopover({
body: "Account Is Updated",
referenceSelector: ".mypopover",
cssClass: "slds-popover slds-nubbin_left"
}).then(function (overlay) {
setTimeout(function(){
//close the popover after 3 seconds
overlay.close();
}, 3000);
});
AccountListController.cls
public class AccountListController {
@AuraEnabled
public static List<Account> getAccounts(){
return [Select Id , Name , Rating, Type , Phone from Account];
}
}
AccountList.cmp
<aura:component controller="AccountListController" implements="flexipage:availableForAllPageTypes,force:appHostable">
<aura:attribute name="accList" type="Account[]" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:overlayLibrary aura:id="overlayLib" />
<table class="slds-table slds-table_bordered" >
<thead>
<tr>
<th>Name</th>
<th>Edit / Modal</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accList}" var="obj">
<tr>
<td> {!obj.Name}</td>
<td>
<lightning:button variant="brand" label="Edit" onclick="{! c.handleClick }" value="{!obj.Id}" /> <br/>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
({
doInit : function(cmp, event, helper) {
var action = cmp.get("c.getAccounts");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
cmp.set("v.accList", response.getReturnValue());
}
});
$A.enqueueAction(action);
},
handleClick : function(component, event, helper) {
$A.createComponent("c:AccountEdit", { recordId : event.getSource().get('v.value') },
function(content, status) {
if (status === "SUCCESS") {
component.find('overlayLib').showCustomModal({
header: "Account Edit",
body: content,
showCloseButton: true,
cssClass: "mymodal",
})
}
});
}
})
On click of the button, it will display as the modal as shown below
- The below action method will be invoked on click of the edit button
handleClick : function(component, event, helper) { } - Create AccountEdit.cmp dynamically as shown below. we will be passing this component as the body to the modal
$A.createComponent("c:AccountEdit", { recordId : event.getSource().get('v.value') }, }) - Finally, call the lightning:overlayLibrary component showCustomModal method as shown below.
component.find('overlayLib').showCustomModal({ header: "Account Edit", body: content, showCloseButton: true, cssClass: "mymodal", }) } });
Beyond Cloud 