3

We have below code being called from Cancel button on a Lightning component. We have used this lightning component on VF page.

navHome : function (component, event, helper) {

    var urlEvent = $A.get("e.force:navigateToURL");
    urlEvent.setParams({
      "url": "/home/home.jsp"
    });

    urlEvent.fire();

}

Above is throwing JS error,

This page has an error. You might just need to refresh it. Action failed: CsApp:ConfigSettings$controller$navHome [urlEvent is undefined] Failing descriptor: {CsApp:ConfigSettings$controller$navHome}

What should be the correct way to navigate Home page?

  • Did you add it as a dependency in the lightning app the the vf lightning out uses? – Eric May 15 '17 at 7:16
  • @Eric yes. Lightning Out used. – Pasan Eeriyagama May 15 '17 at 22:33
4

As mentioned in force:navigateToURL, this event is only supported in LEX and SF1, and not other technologies such as Lightning Out. In that case, just use window.location:

navHome : function (component, event, helper) {
    window.location = "/home/home.jsp";
}

If this component might be used in LEX, SF1, and other places, just check to see if urlEvent is undefined first:

navHome : function (component, event, helper) {

    var urlEvent = $A.get("e.force:navigateToURL");
    if(urlEvent) {
      urlEvent.setParams({
        "url": "/home/home.jsp"
      });

      urlEvent.fire();
    } else {
      window.location = "/home/home.jsp"
    }
}
  • 3
    @sfdcfox - I use urlEvent in lightning out. Difference is I handle the navigation decision in the out function so the component does not have to worry. Not sure if it is better or not but – Eric May 15 '17 at 22:42
  • 1
    @Eric I was pretty sure there was an alternative method, but I wasn't sure how to wire that up. If you want to edit, feel free. I'd love to know more. – sfdcfox May 15 '17 at 22:47
5

Just a different way to slice the pie I guess but this puts the pieces where they belong IMHO and leave lightning in lightning and classic in classic

Lightning App

<aura:application access="GLOBAL" extends="ltng:outApp" description="exampleApp">
    <!-- Load the navigation events in the force namespace. -->
    <aura:dependency resource="markup://force:navigateToURL" type="EVENT"/>
</aura:application>

VF Lightning Out

    $Lightning.use("c:exampleApp", function () {
        $Lightning.createComponent(
                "c.exampleComponent",
                {
                },
                "div_id",
                function (cmp) {
                    $A.eventService.addHandler({
                        event: 'force:navigateToURL',
                        handler: function (event) {
                            if (typeof sforce != 'undefined' && sforce.one) {
                                // VF page in S1 or Lightning Exp
                                // VF page in Classic
                                sforce.one.navigateToURL(event.getParams().url);

                            } else {
                                    window.parent.location.href = event.getParams().url;
                            }

                        }
                    });
                });
    });

Controller Function

functionName: function (component, event, helper) {
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
            "url": '/'
        });
        urlEvent.fire();
    }
  • 3
    Ah, that's cool. definitely going to remember that, we have a lot of projects that need doing. – sfdcfox May 15 '17 at 23:02

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.