I have 1 lightning community page. In there is a theme layout component. It's just a basic layout wherein the upper 1/4 contains a logo banner and some anchor tags for navigation. Then the lower 3/4 of the layout contains the body. The body contains 1 component for my single page application. To summarize what I currently have:

Lightning community page
| -- Theme Layout
     | -- Upper portion of theme layout
     |    | -- c:banner
     |    | -- c:navbar
     | -- Lower portion of theme layout
          | -- c:spa

My problem now is, the c:navbar component works if it will be used for redirecting to other lightning community pages. But how will I make it send a message to the c:spa component so that c:spa can react accordingly?

One of the workarounds I made is to navigateToURL to the same page and just add parameters to the url every time a link in c:navbar is clicked, then i'll just let c:spa process the contents of the URL to know if there is something for it to do. However, doing this refreshes the page and loses the look and feel of a SPA. It also clutters the URL with unnecessary parameters.

Is there any way to send a message from one component to another if they are on separate slots inside a theme layout?

  • You can use an Application Event to communicate between the two, or you can use aura:locationChange to react to changes, and by the way, if you're trying to get a SPA behavior, you should be changing the location's hash (e.g. nagivateToURL using something like #myparam=123), which won't cause a full reload. – sfdcfox Apr 26 at 0:38
  • @sfdcfox Your comment came in as I posted the answer :) I have extensively used this kind of approach in SPAs with application events. Good to know about aura:locationChange. – Jayant Das Apr 26 at 0:43
  • I was using app events before. But using it for this case didn't cross my mind because I thought different slots in a theme layout will block the message from reaching the other component. Thank you @JayantDas that certainly is what I was looking for. @.sfdcfox that's an approach I will definitely try. Thank you. – SamuelDev Apr 26 at 1:03
up vote 4 down vote accepted

What you need here is an application event. Application events by definition states:

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.

In your scenario, you will need to register an application event and fire it from c:navbar and handle that event in your c:spa component.

You can look for more details on communicating with events on the help documentation.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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