lightning:overlayLibrary Example

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 <lightning: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 

The below code from the AccountEdit.cmp will display as Popovers on save of the form.

 

AccountListController.cls

AccountList.cmp

 

On click of the button, it will display as the modal as shown below

 

  1. The below action method will be invoked on click of the edit button
  2. Create AccountEdit.cmp dynamically as shown below. we will be passing this component as the body to the modal
  3. Finally, call the lightning:overlayLibrary component showCustomModal method as shown below.