0

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?

Improve this question
3
  • 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, 2018 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, 2018 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, 2018 at 1:03

1 Answer 1

Reset to default
4

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.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .