SF1: navigateToComponent from Visualforce

Question

I'm trying to get a link on a VF page in SF1 to navigate to a Lightning component. I can do Lightning-component-to-Lightning-component navigation, and Lightning-component-to-VF page navigation, but I'm struggling with the JavaScript syntax for VF-to-Lightning-component navigation.

Here's my code snippet - the JS is basically taken from the component-to-component nav snippet (which works a treat when launced via a ui:button press attribute in a Lightning component):

<apex:page showHeader="true" sidebar="true">

<script>
    function navToPlotList(devIdin, devNamein){
      console.log('dev id: ' + devId);
      console.log('dev name: ' + devName);

          var button = $A.get("e.force:navigateToComponent");
          button.setParams({
            componentDef:"c:pb_plotList",
            componentAttributes: {
              devId: devIdin,
              devName: devNamein
            }

          });
          button.fire(); 
    }

</script>

<a href="#" onClick="navToPlotList('a06L000000GdS7X', 'TEST NAME')">Go to plot list</a>

I know that the issue right now is with the $A on line 8, but I'm not sure what to replace this with in order to get this working. Also I'm not sure whether the button.fire(); will even work from JS in a VF page. Any thoughts?

Answer 1

http://www.mstsolutions.com/blog/content/how-refer-lightning-component-visualforce-page

This Link demonstrate how to call a Lightning component in visualForce page. So in order to navigate from visualforce to a lightning Component, refer a lightning component in another visualforce page and call it from your desired visualforce page.

    <apex:page showHeader="false" sidebar="false">

<!-- This loads the JavaScript file needed to use Lightning Components for Visualforce-->

<apex:includeLightning />


<!-- div tag act as locator while calling Lightning.createComponent -->

<div id="lightning" />

<script>

$Lightning.use("c:SampleLightningApp", function() {

$Lightning.createComponent("c:StyleComponentWithImage",

"",

"lightning",

function(cmp) {

// do some stuff

});

});

</script>

</apex:page>

Answer 2

I opened a case with SF Support about this one a couple of weeks back - just in case anyone finds themselves on this post, here's the reply from Doug Chasman via my case with Salesforce, specifically in relation to navigating from a SF1 enabled VF page, to a custom Lightning component:

"There is no supported way to do this yet - I have been making a fair amount of noise about this feature request with the folks that own S1/SFX and will let you know when I hear of any developments."

Also, Doug confirmed what others have been reporting here on StackExchange - the navigateToComponent was never officially supported and has now been disallowed with Summer 15:

"The loophole client side that "leaked" this access="private" event has been closed. In addition because this was never a supported API the event's structure an and will change or be completely removed. In fact the event has been reworked in Winter '16 in incompatible ways already."

Hopefully we'll get a solution to this sometime soon. In the meantime, I'm going to go ahead and build what I'm doing in Visualforce pages rather than Lightning components.