+ Start a Discussion
SF_MonkeySF_Monkey 

pass recordId to another lightning component using lightning:navigation

I having issues with passing the recordId from acapBtn.cmp to acapChecklist.com.
acapBtn.cmp


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

acapBtnController

var recordId = component.get("v.recordId");
       	 component.find("navigationService").navigate({
            type: "standard__component",
            attributes: {
                componentName: "c__acapChecklist"

            },
            state: {
                recordId: recordId
            }
        });

I have interface lightning:isUrlAddressable on both the component. It is navigating to the right component; however, it is not passing the recordId value to the acapChecklist.cmp.
Thanks!
Best Answer chosen by SF_Monkey
Raj VakatiRaj Vakati
Use this controller code
 
({
	doInit : function(component, event, helper) {
		helper.findBilling(component, event, helper);
        helper.getContacts(component, event, helper);
        helper.getOpp(component, event, helper);
        var result = new Date();
		result.setDate(result.getDate() + 7);
         var today = $A.localizationService.formatDate(result, "YYYY-MM-DD");
        component.find('cDate').set('v.value', today);
        var today1 = $A.localizationService.formatDate(new Date(), "YYYY-MM-DD");
        component.find('actDate').set('v.value', today1);
    },
        
    updateCon : function(component, event, helper){
        helper.updateContacts(component, event, helper);
    },
    
    oppModal :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.addClass(modal,"slds-fade-in-open");
        $A.util.addClass(modalBackdrop,"slds-backdrop_open");
    },

    closeOpp :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.removeClass(modal,"slds-fade-in-open");
        $A.util.removeClass(modalBackdrop,"slds-backdrop_open");
    },
    
    refreshIt: function(component, event, helper){
        component.find('accForm').submit();
        var recordId = component.get("v.recordId");
       	var navService = component.find("navigationService");
        var pageReference = {
            
            "type": "standard__component",
            "attributes": {
                "componentName": "c__acapChecklist"    
            },    
            "state": {
                 recordId: recordId
            }
        };
        navService.navigate(pageReference);    
    }
})




 
({
    init: function (cmp) {
var pageReference = cmp.get("v.pageReference"); 
cmp.set("v.recordId", pageReference.state.recordId);
        var items = [{ value: "LOA", label: "LOA" }, 
                    { value: "180 Solutions Agreement", label: "180 Solutions Agreement" },
                    { value: "Tax ID #", label: "Tax ID #" },
                    { value: "Bill:Wireless", label: "Bill:Wireless" },
                    { value: "Verizon LOA", label: "Verizon LOA" },
                    { value: "Bill:Internet", label: "Bill:Internet" },
                    { value: "Bill:Landline", label: "Bill:Landline" },
                    { value: "Bill:LD", label: "Bill:LD" },];
           
        
        cmp.set("v.options", items);
        // "values" must be a subset of values from "options"
        //cmp.set("v.values", ["LOA", "180 Solutions Agreement", "Tax ID #", "Bill:Wireless", "Verizon LOA"]);
        // "requiredOptions" must be a subset of values from "options"
        cmp.set("v.requiredOptions", ["LOA", "180 Solutions Agreement"]);
         
    },
    
    reinit: function(cmp, event, helper){
    var pageReference = cmp.get("v.pageReference");
        cmp.set("v.recordId", pageReference.state.recordId);
},
    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        var selectedOptionValue = event.getParam("value");
        cmp.set("v.values", selectedOptionValue);
         },
    
    saveItems: function(cmp, event, helper){
        var itemsValue = cmp.get("v.values");
        var accountId = cmp.get("v.recordId");
        var saveAction = cmp.get("c.stackup");
        saveAction.setParams({ itemsValue: itemsValue, 
                              accountId: accountId});
        $A.enqueueAction(saveAction);
    }
})

 

All Answers

Raj VakatiRaj Vakati
Refer this link 

https://rajvakati.com/2018/11/13/navigate-to-component-using-lightningnavigation/


GIve me the complete code
You have to read them linke below
 
var pageReference = cmp.get("v.pageReference");
        cmp.set("v.firstName", pageReference.state.firstName);
        cmp.set("v.lastName", pageReference.state.lastName);


 
SF_MonkeySF_Monkey
Hey Raj,
acapChecklist.cmp
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes,lightning:isUrlAddressable" controller="acapCheckCtrl">
    
	 <aura:attribute name="options" type="List" default="[]"/>
    <aura:attribute name="values" type="List" default="[]"/>
    <aura:attribute name="requiredOptions" type="List" default="[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
   <div class="slds-modal_container slds-p-around_x-small" style="background:white"> 
    <lightning:dualListbox name="multipleOptions"  
                           label= "Select items required" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           options="{!v.options}" 
                           requiredOptions="{!v.requiredOptions}" 
                           onchange="{! c.handleChange }"/> <br/>
    <footer>
    <lightning:button label="Add Items" variant="brand" onclick="{!c.saveItems}" class="slds-float_right"/> 
        </footer>
    </div>
</aura:component>

acapChecklist Controller
({
    init: function (cmp) {
        var items = [{ value: "LOA", label: "LOA" }, 
                    { value: "180 Solutions Agreement", label: "180 Solutions Agreement" },
                    { value: "Tax ID #", label: "Tax ID #" },
                    { value: "Bill:Wireless", label: "Bill:Wireless" },
                    { value: "Verizon LOA", label: "Verizon LOA" },
                    { value: "Bill:Internet", label: "Bill:Internet" },
                    { value: "Bill:Landline", label: "Bill:Landline" },
                    { value: "Bill:LD", label: "Bill:LD" },];
           
        
        cmp.set("v.options", items);
        // "values" must be a subset of values from "options"
        //cmp.set("v.values", ["LOA", "180 Solutions Agreement", "Tax ID #", "Bill:Wireless", "Verizon LOA"]);
        // "requiredOptions" must be a subset of values from "options"
        cmp.set("v.requiredOptions", ["LOA", "180 Solutions Agreement"]);
        
    },
    
    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        var selectedOptionValue = event.getParam("value");
        cmp.set("v.values", selectedOptionValue);
         },
    
    saveItems: function(cmp, event, helper){
        var itemsValue = cmp.get("v.values");
        var accountId = cmp.get("v.recordId");
        var saveAction = cmp.get("c.stackup");
        saveAction.setParams({ itemsValue: itemsValue, 
                              accountId: accountId});
        $A.enqueueAction(saveAction);
    }
})

acapBtnController
({
	doInit : function(component, event, helper) {
		helper.findBilling(component, event, helper);
        helper.getContacts(component, event, helper);
        helper.getOpp(component, event, helper);
        var result = new Date();
		result.setDate(result.getDate() + 7);
         var today = $A.localizationService.formatDate(result, "YYYY-MM-DD");
        component.find('cDate').set('v.value', today);
        var today1 = $A.localizationService.formatDate(new Date(), "YYYY-MM-DD");
        component.find('actDate').set('v.value', today1);
    },
        
    updateCon : function(component, event, helper){
        helper.updateContacts(component, event, helper);
    },
    
    oppModal :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.addClass(modal,"slds-fade-in-open");
        $A.util.addClass(modalBackdrop,"slds-backdrop_open");
    },

    closeOpp :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.removeClass(modal,"slds-fade-in-open");
        $A.util.removeClass(modalBackdrop,"slds-backdrop_open");
    },
    
    refreshIt: function(component, event, helper){
        component.find('accForm').submit();
        var recordId = component.get("v.recordId");
       	 component.find("navigationService").navigate({
            type: "standard__component",
            attributes: {
                componentName: "c__acapChecklist"

            },
            state: {
                recordId: recordId
            }
        });
    }
})

there is alot of unrelated code in. thanks!
Raj VakatiRaj Vakati
Change your init as below
 
({
    init: function (cmp) {
		
		  var pageReference = cmp.get("v.pageReference");
        cmp.set("v.recordId", pageReference.state.recordId);
      
		
		
        var items = [{ value: "LOA", label: "LOA" }, 
                    { value: "180 Solutions Agreement", label: "180 Solutions Agreement" },
                    { value: "Tax ID #", label: "Tax ID #" },
                    { value: "Bill:Wireless", label: "Bill:Wireless" },
                    { value: "Verizon LOA", label: "Verizon LOA" },
                    { value: "Bill:Internet", label: "Bill:Internet" },
                    { value: "Bill:Landline", label: "Bill:Landline" },
                    { value: "Bill:LD", label: "Bill:LD" },];
           
        
        cmp.set("v.options", items);
        // "values" must be a subset of values from "options"
        //cmp.set("v.values", ["LOA", "180 Solutions Agreement", "Tax ID #", "Bill:Wireless", "Verizon LOA"]);
        // "requiredOptions" must be a subset of values from "options"
        cmp.set("v.requiredOptions", ["LOA", "180 Solutions Agreement"]);
        
    },
    
    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        var selectedOptionValue = event.getParam("value");
        cmp.set("v.values", selectedOptionValue);
         },
    
    saveItems: function(cmp, event, helper){
        var itemsValue = cmp.get("v.values");
        var accountId = cmp.get("v.recordId");
        var saveAction = cmp.get("c.stackup");
        saveAction.setParams({ itemsValue: itemsValue, 
                              accountId: accountId});
        $A.enqueueAction(saveAction);
    }
})

 
SF_MonkeySF_Monkey
It is giving this error

c:acapChecklist$controller$init [Cannot read property 'state' of null]
Raj VakatiRaj Vakati
Update refreshId it code as below 
 
refreshIt: function(component, event, helper){
        component.find('accForm').submit();
        
		var recordId = component.get("v.recordId");
       	
		var navService = cmp.find("navService");
        var pageReference = {
            
            "type": "standard__component",
            "attributes": {
                "componentName": "c__acapChecklist"    
            },    
            "state": {
                 recordId: recordId
            }
        };
        cmp.set("v.pageReference", pageReference);
		
		
		
 
    }

 
Raj VakatiRaj Vakati
Here is the complete code
 
({
	doInit : function(component, event, helper) {
		helper.findBilling(component, event, helper);
        helper.getContacts(component, event, helper);
        helper.getOpp(component, event, helper);
        var result = new Date();
		result.setDate(result.getDate() + 7);
         var today = $A.localizationService.formatDate(result, "YYYY-MM-DD");
        component.find('cDate').set('v.value', today);
        var today1 = $A.localizationService.formatDate(new Date(), "YYYY-MM-DD");
        component.find('actDate').set('v.value', today1);
    },
        
    updateCon : function(component, event, helper){
        helper.updateContacts(component, event, helper);
    },
    
    oppModal :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.addClass(modal,"slds-fade-in-open");
        $A.util.addClass(modalBackdrop,"slds-backdrop_open");
    },

    closeOpp :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.removeClass(modal,"slds-fade-in-open");
        $A.util.removeClass(modalBackdrop,"slds-backdrop_open");
    },
    
    refreshIt: function(component, event, helper){
		 component.find('accForm').submit();
        var recordId = component.get("v.recordId");
		var navService = cmp.find("navService");
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__acapChecklist"    
            },    
            "state": {
                 "recordId": recordId
            }
        };
        cmp.set("v.pageReference", pageReference);
	}
})

 
SF_MonkeySF_Monkey
It quit navigating altogether
SF_MonkeySF_Monkey
Here are the attributes on acapBtn.cmp
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
        <aura:attribute name="account" type="Object"/>
    	<aura:attribute name="simpleAccount" type="Object"/>
    	<aura:attribute name="contactList" type="List"/>
   	    <aura:attribute name="eOpp" type="string"/>
        <lightning:navigation aura:id="navigationService"/>
    	  <aura:attribute name="pageReference" type="object"/>

 
Raj VakatiRaj Vakati
Can u give me both the component complete code .. I am sure it must work  
SF_MonkeySF_Monkey
acapChecklist.cmp
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes,lightning:isUrlAddressable" controller="acapCheckCtrl">
    
	 <aura:attribute name="options" type="List" default="[]"/>
    <aura:attribute name="values" type="List" default="[]"/>
    <aura:attribute name="requiredOptions" type="List" default="[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="pageReference" type="object"/> 
     <aura:handler name="reinit" value="{!v.pageReference}" action="{!c.reinit}"/>
   <div class="slds-modal_container slds-p-around_x-small" style="background:white"> 
    <lightning:dualListbox name="multipleOptions"  
                           label= "Select items required" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           options="{!v.options}" 
                           requiredOptions="{!v.requiredOptions}" 
                           onchange="{! c.handleChange }"/> <br/>
    <footer>
    <lightning:button label="Add Items" variant="brand" onclick="{!c.saveItems}" class="slds-float_right"/> 
        </footer>
    </div>
</aura:component>

acapChecklist controller
({
    init: function (cmp) {
        var items = [{ value: "LOA", label: "LOA" }, 
                    { value: "180 Solutions Agreement", label: "180 Solutions Agreement" },
                    { value: "Tax ID #", label: "Tax ID #" },
                    { value: "Bill:Wireless", label: "Bill:Wireless" },
                    { value: "Verizon LOA", label: "Verizon LOA" },
                    { value: "Bill:Internet", label: "Bill:Internet" },
                    { value: "Bill:Landline", label: "Bill:Landline" },
                    { value: "Bill:LD", label: "Bill:LD" },];
           
        
        cmp.set("v.options", items);
        // "values" must be a subset of values from "options"
        //cmp.set("v.values", ["LOA", "180 Solutions Agreement", "Tax ID #", "Bill:Wireless", "Verizon LOA"]);
        // "requiredOptions" must be a subset of values from "options"
        cmp.set("v.requiredOptions", ["LOA", "180 Solutions Agreement"]);
         
    },
    
    reinit: function(cmp, event, helper){
    var pageReference = cmp.get("v.pageReference");
        cmp.set("v.recordId", pageReference.state.recordId);
},
    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        var selectedOptionValue = event.getParam("value");
        cmp.set("v.values", selectedOptionValue);
         },
    
    saveItems: function(cmp, event, helper){
        var itemsValue = cmp.get("v.values");
        var accountId = cmp.get("v.recordId");
        var saveAction = cmp.get("c.stackup");
        saveAction.setParams({ itemsValue: itemsValue, 
                              accountId: accountId});
        $A.enqueueAction(saveAction);
    }
})
acapBtn.cmp
<aura:component implements="force:lightningQuickActionwithoutheader,force:hasRecordId,flexipage:availableForRecordHome,lightning:isUrlAddressable" controller="acapCtrl" >
	
    <aura:html tag="style">
        .slds-modal__container{
        height : auto;
        width: 92vw;
        max-width: 500rem;
       
       
        }
        .modal-body{
        height : 500px !important;
        max-height: 500px !important;
         
        }        
        .customFooter{
        display: inline !important;
        }
    </aura:html>
    			<!-- Handlers and attributes -->
    	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
        <aura:attribute name="account" type="Object"/>
    	<aura:attribute name="simpleAccount" type="Object"/>
    	<aura:attribute name="contactList" type="List"/>
   	    <aura:attribute name="eOpp" type="string"/>
        <lightning:navigation aura:id="navigationService"/>
    	  <aura:attribute name="pageReference" type="object"/>
    
         		<!-- Getting Account Information -->
   		 <force:recordData aura:id="accountRecordLoader"
        recordId="{!v.recordId}"
        fields="Name,BillingCity,BillingState"
        targetRecord="{!v.account}"
        targetFields="{!v.simpleAccount}"/>
    
     
       				<!-- List of contacts -->
       <section >   	    
            <div class="slds-modal__container" style="  width: 90vw; right:25px">
                <!-- Modal Header ( consists of close button and heading of modal ) -->
                <header class="slds-modal__header">  
                    
                    <h2 id="contactListModalHeading" class="slds-text-heading_medium slds-hyphenate">Please verify the contacts</h2>
                </header>
                <!-- Modal Body ( consists of form ) -->
        <div class="slds-modal__content slds-p-around_medium" id="contactListModalBody" style="height : auto !important; max-height: 500px !important;">
               
            <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer ">
        <div aura:id="conEditForm">
        <thead>          
            <tr class="slds-text-heading--small"> 
                <th scope="col"><span class="slds-truncate">Name </span></th>
                <th scope="col"><span class="slds-truncate">Phone</span></th>
                <th scope="col"><span class="slds-truncate">Mobile</span></th>
                <th scope="col"><span class="slds-truncate">Email</span></th>
                <th scope="col"><span class="slds-truncate">Primary POC</span></th>
                <th scope="col"><span class="slds-truncate">Technical POC</span></th>
                <th scope="col"><span class="slds-truncate">Wireless POC</span></th> 
                <th scope="col"><span class="slds-truncate">Billing POC</span></th> 
                <th scope="col"><span class="slds-truncate">Inactive POC</span></th> 
                <th scope="col"><span class="slds-truncate">Action</span></th> 
               
            </tr>
            
        </thead>
        
                
        <tbody>
            <aura:iteration items="{!v.contactList}" var="conList" >
                <tr>
                  
                    <th scope="row"><ui:outputText value="{!conList.Name}"/></th>
                    <td><ui:inputPhone value="{!conList.Phone}"/></td>                      
                    <td><ui:inputPhone value="{!conList.MobilePhone}"/></td>                
                    <td><ui:inputEmail value="{!conList.Email}"/></td>
                    <td><ui:inputCheckbox value="{!conList.Primary_POC__c}"/> </td>  
                    <td><ui:inputCheckbox value="{!conList.Technical_POC__c}"/></td>
                    <td><ui:inputCheckbox value="{!conList.Wireless_POC__c}"/></td>
                    <td><ui:inputCheckbox value="{!conList.Billing_POC__c}"/></td>
                    <td><ui:inputCheckbox value="{!conList.Inactive_POC__c}"/></td>
                    <td><button type="button" onclick="{!c.updateCon}" class="slds-button slds-button--brand" id="{!conList.Id}">Save</button></td>
                </tr>
            </aura:iteration>
        </tbody>
            </div>
    </table>
                </div>
              <footer class="slds-modal__footer" style="display: inline !important;">
                     <lightning:button label="Next" onclick="{!c.oppModal}" variant="neutral"/>                   
                </footer>
            </div>
       </section>
   							  <!--Modal for Opportunity Fields -->
    <div>
        <section aura:id="oppModal" role="dialog" tabindex="-1" aria-labelledby="oppModalHeading" aria-modal="true" aria-describedby="oppModalBody" class="slds-modal">
          	    
            <div class="slds-modal__container" style="  width: 20vw;">
                <!-- Modal Header ( consists of close button and heading of modal ) -->
                <header class="slds-modal__header">  
                    <lightning:buttonIcon class="slds-modal__close" alternativeText="Close" iconName="utility:close" onclick="{!c.closeOpp}" variant="bare-inverse" size="large"></lightning:buttonIcon>
                    <h2 id="oppModalHeading" class="slds-text-heading_medium slds-hyphenate">Verify Contract Management Terms</h2>
                </header>
             						   <!-- Modal Body ( consists of form ) -->
        <div class="slds-modal__content slds-p-around_medium" id="oppModalBody" style="height : 320px !important; max-height: 500px !important;">
               
            <lightning:recordEditForm 
                                         recordId = "{!v.eOpp}"
                                    	 objectApiName="Opportunity"
                                      onsuccess="{!c.refreshIt}">
                   <lightning:inputField fieldName = "Estimated_Bill_Volume__c"/>
                   <lightning:inputField fieldName = "Contract_Term__c"/>
                <lightning:inputField fieldName = "Proposed__c"/>
                <lightning:inputField fieldName = "AIF__c"/> <br/>
                <div style="display:none">
                    <lightning:inputField fieldName="Contract_Close_Date__c" aura:id="actDate"/>
                    <lightning:inputField fieldName="StageName" value="ACAP Processing"/>
                    <lightning:inputField fieldName="CloseDate" aura:id="cDate"/>
                <lightning:recordEditForm 
                                         recordId = "{!v.recordId}"
                                    	 objectApiName="Account"
                                          aura:id="accForm">
                          <lightning:inputField fieldName = "Disposition_Status__c" value="ACAP-Processing"/>				
                    </lightning:recordEditForm>
                </div>
                
                <lightning:button label="Complete" type="submit" variant="brand" class="slds-float_right" />
            </lightning:recordEditForm>
            
                </div>
            </div>
        </section>
        <div aura:id="oppModalBackdrop" class="slds-backdrop"></div>
    </div>
    
</aura:component>

acapBtn controller
({
	doInit : function(component, event, helper) {
		helper.findBilling(component, event, helper);
        helper.getContacts(component, event, helper);
        helper.getOpp(component, event, helper);
        var result = new Date();
		result.setDate(result.getDate() + 7);
         var today = $A.localizationService.formatDate(result, "YYYY-MM-DD");
        component.find('cDate').set('v.value', today);
        var today1 = $A.localizationService.formatDate(new Date(), "YYYY-MM-DD");
        component.find('actDate').set('v.value', today1);
    },
        
    updateCon : function(component, event, helper){
        helper.updateContacts(component, event, helper);
    },
    
    oppModal :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.addClass(modal,"slds-fade-in-open");
        $A.util.addClass(modalBackdrop,"slds-backdrop_open");
    },

    closeOpp :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.removeClass(modal,"slds-fade-in-open");
        $A.util.removeClass(modalBackdrop,"slds-backdrop_open");
    },
    
    refreshIt: function(component, event, helper){
        component.find('accForm').submit();
        var recordId = component.get("v.recordId");
       	var navService = component.find("navigationService");
        var pageReference = {
            
            "type": "standard__component",
            "attributes": {
                "componentName": "c__acapChecklist"    
            },    
            "state": {
                 recordId: recordId
            }
        };
        component.set("v.pageReference", pageReference);
    }
})


 
Raj VakatiRaj Vakati
Use this controller code
 
({
	doInit : function(component, event, helper) {
		helper.findBilling(component, event, helper);
        helper.getContacts(component, event, helper);
        helper.getOpp(component, event, helper);
        var result = new Date();
		result.setDate(result.getDate() + 7);
         var today = $A.localizationService.formatDate(result, "YYYY-MM-DD");
        component.find('cDate').set('v.value', today);
        var today1 = $A.localizationService.formatDate(new Date(), "YYYY-MM-DD");
        component.find('actDate').set('v.value', today1);
    },
        
    updateCon : function(component, event, helper){
        helper.updateContacts(component, event, helper);
    },
    
    oppModal :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.addClass(modal,"slds-fade-in-open");
        $A.util.addClass(modalBackdrop,"slds-backdrop_open");
    },

    closeOpp :function(component, event, helper){
         var modal = component.find("oppModal");
        var modalBackdrop = component.find("oppModalBackdrop");
        $A.util.removeClass(modal,"slds-fade-in-open");
        $A.util.removeClass(modalBackdrop,"slds-backdrop_open");
    },
    
    refreshIt: function(component, event, helper){
        component.find('accForm').submit();
        var recordId = component.get("v.recordId");
       	var navService = component.find("navigationService");
        var pageReference = {
            
            "type": "standard__component",
            "attributes": {
                "componentName": "c__acapChecklist"    
            },    
            "state": {
                 recordId: recordId
            }
        };
        navService.navigate(pageReference);    
    }
})




 
({
    init: function (cmp) {
var pageReference = cmp.get("v.pageReference"); 
cmp.set("v.recordId", pageReference.state.recordId);
        var items = [{ value: "LOA", label: "LOA" }, 
                    { value: "180 Solutions Agreement", label: "180 Solutions Agreement" },
                    { value: "Tax ID #", label: "Tax ID #" },
                    { value: "Bill:Wireless", label: "Bill:Wireless" },
                    { value: "Verizon LOA", label: "Verizon LOA" },
                    { value: "Bill:Internet", label: "Bill:Internet" },
                    { value: "Bill:Landline", label: "Bill:Landline" },
                    { value: "Bill:LD", label: "Bill:LD" },];
           
        
        cmp.set("v.options", items);
        // "values" must be a subset of values from "options"
        //cmp.set("v.values", ["LOA", "180 Solutions Agreement", "Tax ID #", "Bill:Wireless", "Verizon LOA"]);
        // "requiredOptions" must be a subset of values from "options"
        cmp.set("v.requiredOptions", ["LOA", "180 Solutions Agreement"]);
         
    },
    
    reinit: function(cmp, event, helper){
    var pageReference = cmp.get("v.pageReference");
        cmp.set("v.recordId", pageReference.state.recordId);
},
    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        var selectedOptionValue = event.getParam("value");
        cmp.set("v.values", selectedOptionValue);
         },
    
    saveItems: function(cmp, event, helper){
        var itemsValue = cmp.get("v.values");
        var accountId = cmp.get("v.recordId");
        var saveAction = cmp.get("c.stackup");
        saveAction.setParams({ itemsValue: itemsValue, 
                              accountId: accountId});
        $A.enqueueAction(saveAction);
    }
})

 
This was selected as the best answer
SF_MonkeySF_Monkey
It is still not passing the recordId. It is coming in null
Sanjay Bhati 95Sanjay Bhati 95
Hi Sf_Monkey,

Please try this below code and let me know your feedback.
Here is the whole code of both component.

1. FromComponent.cmp 
<aura:component  implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:navigation aura:id="navService"/>
    <button onclick="{!c.navigateUrl}">Navigate</button>
</aura:component>

2. FromComponent.controller
({
	navigateUrl : function(component, event, helper) {
        var pageReference = {
            type: "standard__component",
            attributes: {
                componentName: "c__Add_Money"    
            },    
            state: {
                rid:component.get("v.recordId")
            }
        };
        var navService = component.find("navService");
        navService.navigate(pageReference);
	}
})

3. ToComponent.controller := get the value of PageReference in doInIt method of second component controller.
doInit : function(component, event, helper){
        var pageReference = component.get("v.pageReference");
        console.log(pageReference.state.rid);
        helper.createNewExpense(component, event, helper);
    }

Please apply and test this code.



 
Polayya reddyPolayya reddy
I can see there are some changes on state parameters in Pagereference

--------------------
({
    doOrder : function(component, event, helper) {
  
        var pageReference = component.find("navigation");
        var pageReferenceNav = {    
            "type": "standard__component",
            "attributes": {
                "componentName": "c__Createorder"    
            },    
            "state": {
                c__beerId: component.get('v.beerId') ,
                c__beerName: component.get('v.beerName')
            }

        };
       
        pageReference.navigate(pageReferenceNav);
    }
})

---------------------------------------------------------------------------
({
    doInit : function(component, event, helper) {
        var pageReference = component.get('v.pageReference');
          if(pageReference){
            var state = pageReference.state;
         
            component.set('v.beerId', state.c__beerId);
             
            component.find("recordEditor").reloadRecord();
        }
        component.find("newRecordCreator").getNewRecord(
            "Beer_Order__c", 
            null,      
            false,    
            $A.getCallback(function() {
                var rec = component.get("v.newRecordObject");
                var error = component.get("v.newRecordError");
                if(error || (rec === null)) {
                    console.log("Error initializing record template: " + error);
                }
                else {
                    console.log("Record template initialized: " + rec.sobjectType);
                }
            })
        );
    },
    handleSubmit : function(component, event, helper) {
        var beerRecord = component.get('v.simpleRecord');
       
        console.log('beerRecord Price', beerRecord.Price__c);
        console.log('beerRecord Tag', beerRecord.Tags__c);
        
        var quantity = component.get('v.beerOrder.Ordered_Quantity__c');
        console.log('Ordered price ', quantity);
        var totalPrice = parseInt(beerRecord.Price__c)*parseInt(quantity);
        console.log(' totalPrice ', totalPrice);
        var isValid = helper.validateForm(component, event, helper);
        if(component.get("v.beerOrder.Billing_Same_as_Shipping__c")){
            component.set('v.beerOrder.Billing_Street__c', component.get('v.beerOrder.Shipping_Street__c'));
            component.set('v.beerOrder.Billing_City__c', component.get('v.beerOrder.Shipping_City__c'));
            component.set('v.beerOrder.Billing_Country__c', component.get('v.beerOrder.Shipping_Country__c'));
            component.set('v.beerOrder.Billing_State__c', component.get('v.beerOrder.Shipping_State__c'));
            component.set('v.beerOrder.Billing_Postal_Code__c', component.get('v.beerOrder.Shipping_Postal_Code__c'));
            
        }
        if(!isValid)
            return;
        var userId = $A.get("$SObjectType.CurrentUser.Id");
        //alert(userId);
        component.set("v.beerOrder.Beer__c", component.get("v.beerId"));
        component.set("v.beerOrder.Ordered__c", userId); 
        component.set("v.beerOrder.Order_Amount__c", parseInt(totalPrice));
        component.find("newRecordCreator").saveRecord(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                var resultsToast = $A.get("e.force:showToast");
                resultsToast.setParams({
                    "title": "Order Placed",
                    "message": "Your Order has been successfully placed. " ,
                    "type" : "success"
                });
                resultsToast.fire();
                helper.updateBeerQty(component, event,quantity, saveResult.recordId);
            } else if (saveResult.state === "INCOMPLETE") {
                console.log("User is offline, device doesn't support drafts.");
            } else if (saveResult.state === "ERROR") {
                console.log('Problem saving contact, error: ' + 
                            JSON.stringify(saveResult.error));
                var resultsToast = $A.get("e.force:showToast");
                resultsToast.setParams({
                    "title": "Error While Placing Your Order.",
                    "message": JSON.stringify(saveResult.error),
                    "type" : "success"
                });
                resultsToast.fire();
            } else {
                console.log('Unknown problem, state: ' + saveResult.state +
                            ', error: ' + JSON.stringify(saveResult.error));
            }
        });
    },
})