4

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.

  • 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 '17 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 '17 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. – Etienne Rocheleau Oct 4 '17 at 20:24
2

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.

  • 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. – Etienne Rocheleau Oct 5 '17 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 '17 at 17:28
  • @EtienneRocheleau Did you get a chance to test this with community? – Rao Oct 6 '17 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. – Etienne Rocheleau Oct 10 '17 at 13:19
  • Awesome keep me posted. – Rao Oct 10 '17 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.

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.