1

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>
0

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:

  1. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_navigation_page_definitions.htm

  2. https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/documentation


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);
    }
})
| improve this answer | |
  • I don't want to navigate to standard page. I want to navigate to another custom component – yakshith bangera Jul 23 '19 at 7:20
  • added in answer – salesforce-sas Jul 23 '19 at 8:00
  • I tried the above solution. But its not working.I have attached the sample code. Can you please check and help me in finding bug. – yakshith bangera Jul 23 '19 at 10:04
  • You are passing the param in url but you are not handling in comp2. Added the code needed in answer – salesforce-sas Jul 23 '19 at 10:13
  • I changed the code as per your correction. But still its not working. I'm trying this by calling component1 in lightning application. Is it right way? – yakshith bangera Jul 23 '19 at 10:37

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.