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?

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

2 Answers 2

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"
    }
}
2
  • 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, 2017 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, 2017 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();
    }
1
  • 3
    Ah, that's cool. definitely going to remember that, we have a lot of projects that need doing.
    – sfdcfox
    May 15, 2017 at 23:02

You must log in to answer this question.

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