[SalesForce] How to navigate to one component to another by passing parameters

I'm new to Salesforce. I have just started with lightning Aura components. I want to understand simple workflow of aura. Can anyone help me with the code for below requirement. Thanks in advance.

Requirement.
I have two custom components. One component has list of custom object records. Another component has detail page of that record. Onclick of record in the first component it should navigate to second component by passing Id and display current record details.

Sample code attached;
Component1.cmp:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"><aura:attribute name="Result" type="String"/>
  <lightning:navigation aura:id="navService"/>
  <ui:inputText aura:id="n1" maxlength="5" size="5" label="Number1" required="true"/>
  <ui:inputText aura:id="n2" maxlength="5" size="5" label="Number2" required="true"/>
  <ui:button label="Sum" press="{!c.Calculate}"/></aura:component>

Component1.js

({Calculate : function(component, event, helper) {
  var a = component.find("n1").get("v.value");
  var b = component.find("n2").get("v.value");
  var res = parseInt(a) + parseInt(b);
  res = res + '';
  component.find("navService").navigate({    
    "type": "standard__component",
     "attributes": {
         "componentName": "c__Component2"    
     },    
     "state": {
         "res":"5"  
     }
});

}
})

Component2.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable"><aura:attribute name="res" type="String" />The result is {!v.res}</aura:component>

Best Answer

You can use lighting:navigation for that:

cmp:

<lightning:navigation aura:id="navService"/>

JS: (for standard record page)

goToRecord: function(component,event,helper) {
    component.find("navService").navigate({
        "type": "standard__recordPage",
       "attributes": {
           "recordId": "001xx000003DGg0AAG",
           "objectApiName": "TargetObjectAPIName__c",
           "actionName": "view"
       }
    });
}

Js for custom component (should implement lightning:isUrlAddressable interface)

goToRecord: function(component,event,helper) {
    component.find("navService").navigate({    
        "type": "standard__component",
         "attributes": {
             "componentName": "c__MyLightningComponent"    
         },    
         "state": {
             "c__recordId": ""//pass the target target record id    
         }
    });
}

References:

CORRECTIONS:

correct state as below:

"state": {
     "c__res":"5"  
 }

Component2 html:

<aura:component implements="lightning:isUrlAddressable" >
    <aura:attribute name="res" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChange}"/>
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChange}"/>
    Hello {!v.firstname}.

    The result is {!v.res}
</aura:component>

Now its JS:

({
    onPageReferenceChange: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var firstname = myPageRef.state.c__res;
        cmp.set("v.res", res);
    }
})

Related Solutions

[SalesForce] How to navigate from one lightning component to another lightning component

Seems there is an event missing from the documentation, I went through this last week. Try this..

Component markup

<ui:button label="ATTENDANCE" press="{!c.navigateToRollCall}"/>

Controller (I am using default namespace here for my component AttendanceRollCall)

navigateToRollCall : function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef: "c:AttendanceRollCall",
            componentAttributes: {
                programId: component.get("v.program.Id")
            }
        });
    evt.fire();    
}

[SalesForce] Navigate from one lightning web component to another via lightning/navigation

You can navigate to one lightning web component from another lightning web component by creating a URL in Base64 encoded form. Use the below code in your method to navigate. Here the name of the lightning web component where I am navigating is one.

   var compDefinition = {
      componentDef: "c:one",
      attributes: {
        //
      }
    };
    // Base64 encode the compDefinition JS object
    var encodedCompDef = btoa(JSON.stringify(compDefinition));
    this[NavigationMixin.Navigate]({
         type: 'standard__webPage',
         attributes: {
               url: 'http://instance url.com/one/one.app#' + encodedCompDef
        }
   });

Another Approach(Documented way)

You can navigate to one lightning web component from another Lightning web component. You need to embed the Lightning web component inside an Aura Component and then use lightning navigation as below:-

To make an addressable Lightning web component, embed it in an Aura component that implements the lightning:isUrlAddressable interface.

Type :- standard__component
Experience :- Lightning Experience, Salesforce Mobile App

To Navigate use below code in your method:-

this[NavigationMixin.Navigate]({
        type: "standard__component",
        attributes: {
            componentName: "c__OrderLinesUiFullPage"
        },
        state: {
            c__orderId: "test"
        }
    });

Refer this question to know how you can retrieve the value in Aura component from Lightning web Component:- How to pass attribute when redirecting from lwc to aura component

Best Answer

Related Solutions

[SalesForce] How to navigate from one lightning component to another lightning component

[SalesForce] Navigate from one lightning web component to another via lightning/navigation

Related Topic