1

I'm building a lightning page using several lightning components and using lightning data service. I would like to keep components as reusable as possible.
What I am trying to accomplish is when I click a button on one component, a form will show as a pop-up (an independent lightning component). This component will be reused several times in the lightning page from many different components.
I don't think a modal will work since that will have to be tied into the controller for each individual component. I know that data can be shared from parent to child components, but these are all sibling components. So is there a way to share data between siblings or is my only option to code a modal into every component?
For examples sake lets just say I'm trying to open component "HelloWorld.cmp" from a button on a different component and I need to see "HelloWorld.cmp" as a pop up window.

<aura:component implements="flexipage:availableForAllPageTypes, force:hasRecordId, force:appHostable" access="global">
    <h1>hello world</h1>
</aura:component>
2

You will need to use Events to be able to share data between components. Because you need to communicate between "sibling" components and not components within a hierarchy, you will need an Application Event.

Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

You need to register the event from the calling component and handle the event in the component that has been invoked. Refer to more on building events on the documentation here.

  • This worked for my problem. I created an application level Lightning Event, registered and fired the event from the main component. The Modal Component handled the event. Working perfectly now – Mike Meadows Apr 9 '18 at 1:48
  • That’s great to know and also to share with the group as a follow up that you were able to resolve your issue. – Jayant Das Apr 9 '18 at 1:52
1

Allow the modal to accept an arbitrary body, and you can put what you want inside of it. Your code might look like this:

<aura:component controller="...">
  <c:mymodal onaccept="{!c.accept}" oncancel="{!c.cancel}" ondismiss="{!c.dismiss}">
    <!-- code you want inside your modal -->
  </c:mymodal>
</aura:component>

Using this design, the modal takes care of the modal work, and each sibling component can communicate with each other. This is essentially what lightning:overlayLibrary does, but I find it kind of distracting to have to call a method just to open the dialog. Writing your own modal is basically a copy-paste operation from the Modals SLDS documentation.

You can make it as complicated or as simple as you need it to be, and reuse the modal's framework as often as you want. You can also put other components inside of the body as well, creating a template framework. This is how Lightning Components are meant to be developed.

  • I actually think the overlayLibrary framework is really smart. You can throw modals from just about anything after you've written the abstraction layer once. I incorporate modals in all my apps and it's a really reusable component that dynamically creates modal body and footer. – tsalb Apr 5 '18 at 4:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.