5

I want to build a component that can ideally live inside the Napili community template header.

This component has to trigger some code whenever there is a navigation occuring in the community.

I have not found how to do this myself, The system event : aura:locationChange does not seem to do what I want to do, And I have not found a way to listen on the force:navigateToURL and other such events from the aura/force framework.

If anyone has an idea I would take it :)

As of now I can see this working by listening on the "render" and "rerender" of my component and keeping a check to see if the URL of the page has changed. (There has to be a better way?)

I have also posted this on https://developer.salesforce.com/forums/ForumsMain?id=9060G000000MRKRQA4

Edit: This component is not responsible for firing the navigateToUrl or any other navigation event. I just need to be able to do some processing on every navigation in the community.

3
  • did you try stetting params using urlEvent.setParams in the force:navigateToURL component and then capturing the change through aura:locationChange, without looking at how you used force;navigatetoURL it might be hard to say
    – Rao
    Oct 4, 2017 at 18:59
  • this post clearly says how to handle URL centric navigation, now because this has to do with community I am no expert to suggest any better ideas if this does not work as documented: developer.salesforce.com/docs/atlas.en-us.lightning.meta/…
    – Rao
    Oct 4, 2017 at 19:01
  • Sorry if my question was not clear, but my component is not responsible for firing the navigateToUrl event, I just want to know if there was any navigation at all. I edited my question reflect that. Oct 4, 2017 at 20:24

2 Answers 2

3

Update for others looking for a solution to this question :

You do not need popstate (or) hashchange, thanks to Etienne Rocheleau for figuring out this event:

There is a forceCommunity:routechange event that does the exact job of tracing the url changes:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_forceCommunity_routeChange.htm

Note:

This is my armature attempt to capture changes in the URL let me know if this is not your intent for posting the question

Give this a try: I did not experiment too much with many browsers.

I looked around to see if there are any listeners to detect URL change.I stumbled across this post

https://stackoverflow.com/questions/1930927/how-can-i-detect-an-address-bar-change-with-javascript

Extending this concept

I looked into Locker service API to see if window.addEventListener method was supported by aura and looks like it is from here:

Note: Lockerservice supports HashchangeEvent and PopStateEvent, does not support onpopstate,onhashchange methods

http://documentation.auraframework.org/lockerApiTest/index.app?aura.mode=DEV

From here I tried to implement the same into a lightning environment to see if the location #change was comminicated to the helper component( luckily it did)

App:

<aura:application >
    <c:urlHashChangeEventcomp></c:urlHashChangeEventcomp>
</aura:application>

Comp:

I used a button to append #value to url.you can try by appending # value to the URL through redirect/location.href as I did and see if the addEventListener will pick up the change.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <ui:button label="AppendhashtoURL" press="{!c.detecturlchange}" />
</aura:component>

Controller:

    ({
    detecturlchange : function(component, event, helper) {
        window.location.href += "#mypara";
        location.reload();
        window.addEventListener("hashchange",helper.handleHashChange(location.hash));
    },

})

You can also detect the url change using popstate apparently( not tested as mentioned previously with other browsers except chrome v61). If you want to go this route:

({
    detecturlchange : function(component, event, helper) {
        window.location.href = '/myparam';
 window.addEventListener("popstate",helper.handleHashChange(location.hash));
    },

})

Helper;

 ({
    handleHashChange: function(hashval) {
    alert( 'I got called by # value change in the url'+hashval) ;      
    }
})

If you are using popstate update helper method signature accordingly.

14
  • I will definitely try with the popState, my understanding was that this was mostly related to the back/forward buttons on the browser. I do not really care about the hash change however. What I am interested in for example is the navigation from home page to record details page. For example my component would be in top header, so it will not get reloaded, but I can initialize on home page, but I need to do some processing when moving to a record page, or the search page, or the case creation page, etc. Oct 5, 2017 at 13:34
  • Check if this POC with pop state works and if it does add this dataless component to every page you need to track the url change
    – Rao
    Oct 5, 2017 at 17:28
  • @EtienneRocheleau Did you get a chance to test this with community?
    – Rao
    Oct 6, 2017 at 21:12
  • Sorry, not yet, was still working on it and kept the best part for last :) I should be trying out your solution today. Oct 10, 2017 at 13:19
  • Awesome keep me posted.
    – Rao
    Oct 10, 2017 at 13:40
2

It seems that either this was missed in the documentation or it was updated after asking this question, but I believe this even is exactly the response to the original problem:

https://developer.salesforce.com/docs/atlas.en-us.212.0.lightning.meta/lightning/ref_forceCommunity_routeChange.htm

It does not provide any context as to what kind of navigation was executed or what is the target of the navigation, but it provides the kind of trigger that was needed originally.

You must log in to answer this question.

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