+ Start a Discussion
fredkafredka 

Navigate Between Components using Navigate

I  was using e.force:navigateToComponent and had everything working but then realized this is depreciated.  I am attempting to replace the logic by using navigate.  

It seems to be working in that I get redirected to the second component but the attribute that I am passing is not displaying in my data table.  I see that the attribute on the second component is getting populated but its just not displaying in my datatable.  

Any help is greatly appreciated!

Here is the function that calls the second component:

    //New code to replace navigateToComponent
    component.find("nav").navigate({
            type: "standard__component",
            attributes: {
                componentName: "c__GroupStructureListPDF"
            },
            state: {
                groupstructures: component.get("v.groupstructures")
            }
        });

   },

Here is the second component:

    <aura:component implements="lightning:isUrlAddressable" access="global" >
    
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

    <!-- Main attribute uses to display all of the group structures as PDF -->
    <aura:attribute name="groupstructures" type="Group_Structure__c[]"/>
    
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    
    <!--Attributes for Sorting table -->
    <aura:attribute name="sortedBy"
                type="String" />
    <aura:attribute name="sortedDirection"
                type="Boolean"
                default="true" />
    
     <!-- Button to print PDF -->
    <ui:button label="Print"  press="{!c.PrintTable}"/>
  
    <!-- the container element determine the height of the datatable -->
    <div style="height: 300px">
        <lightning:datatable aura:id="lightningTable"
                keyField="id"
                data="{! v.groupstructures }"
                columns="{! v.columns }"
                sortedBy="{!v.sortedBy}"
                sortedDirection="{!v.sortedDirection}"
                onsort="{!c.updateColumnSorting}"
                hideCheckboxColumn="true"/>
    </div>
 
</aura:component>

Here is the init function for the second component

    ({
    init: function (cmp, event, helper) {
        
        //set the groupstructures attribute that is being passed via page reference need the next two lines of code
        var pageReference = cmp.get("v.pageReference");
        cmp.set("v.groupstructures", pageReference.state.groupstructures);
        
        console.log("### here are the group structures!!! " + JSON.stringify(cmp.get("v.groupstructures")));
    cmp.set('v.columns', [
            {label: 'Status', fieldName: 'Status__c', type: 'text', sortable: true},
            {label: 'Funding Type', fieldName: 'Funding_Type__c', type: 'text', sortable: true},
            {label: 'Group Number', fieldName: 'Group_Number__c', type: 'text', sortable: true},
            {label: 'Section Code', fieldName: 'Section_Code__c', type: 'text', sortable: true},
            {label: 'Package Code', fieldName: 'Package_Code__c', type: 'text', sortable: true},
            {label: 'Effectve Date', fieldName: 'Effective_Date__c', type: 'text', sortable: true},
            {label: 'End Date', fieldName: 'End_Date__c', type: 'text', sortable: true},
            {label: 'Health_Product', fieldName: 'Health_Product__c', type: 'text', sortable: true},
            {label: 'Prescription?', fieldName: 'Prescription__c', type: 'text', sortable: true},
            {label: 'Dental?', fieldName: 'Dental__c', type: 'text', sortable: true},
            {label: 'Vision?', fieldName: 'Vision__c', type: 'text', sortable: true},
            {label: 'CDH Status', fieldName: 'CDH_Status__c', type: 'text', sortable: true},
            {label: 'Coverage Categories', fieldName: 'Coverage_Categories__c', type: 'text'},
            {label: 'Prefix', fieldName: 'Prefix__c', type: 'text', sortable: true},
            {label: 'Description', fieldName: 'Description__c', type: 'text', sortable: true},

        ]);

    },