urlEvent is undefined

Question

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?

Answer 1

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"
    }
}

Answer 2

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();
    }