6

I have an aura component that's being used twice in the same layout. This component mimics related lists: enter image description here When i press "View All", i get to see a full list of the related records.

I use the same component twice, in the same page, for different records: enter image description here

When i press "View All" on the second component, it shows me the list of the first component instead.

<a onclick="{!c.handleGoToViewAllComponent}">View All</a>

handleGoToViewAllComponent: function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__EnhancedRelatedListViewAll',
            },
            state: {
                "c__title": component.get("v.title"),
                "c__orderBy" : component.get("v.orderBy"),
                "c__sortedDirection" : component.get("v.sortedDirection"),
                "c__minColumnWidth" : component.get("v.minColumnWidth"),
                "c__fields" : component.get("v.fields"),
                "c__sobjectApiName" : component.get("v.sobjectApiName"),
                "c__fieldSourceApiName" : component.get("v.fieldSourceApiName"),
                "c__fieldSourceType" : component.get("v.fieldSourceType"),
                "c__relationshipPointer" : component.get("v.relationshipPointer"),
                "c__orderBy" : component.get("v.orderBy"),
                "c__filterBy" : component.get("v.filterBy"),
                "c__recordId" : component.get("v.recordId"),
                "c__allowActions" : component.get("v.allowActions"),
                "c__breadcrumbs" : JSON.stringify(component.get('v.breadcrumbs'))
            }
        };
        event.preventDefault();
        navService.navigate(pageReference);
    },

Couldn't find a way to solve this issue, please advise.

** UPDATE ** Full code for c__EnhancedRelatedListViewAll:

markup:

<aura:component controller="EnhancedRelatedListController" implements="lightning:isUrlAddressable">
    <!--parameters received from EnhancedRelatedList.cmp-->
    <aura:attribute name="title" type="String" />
    <aura:attribute name="sortedDirection" type="String"/>
    <aura:attribute name="minColumnWidth" type="Integer"/>
    <aura:attribute name="fields" type="String"/>
    <aura:attribute name="sobjectApiName" type="String"/>
    <aura:attribute name="fieldSourceApiName" type="String"/>
    <aura:attribute name="fieldSourceType" type="String"/>
    <aura:attribute name="relationshipPointer" type="String"/>
    <aura:attribute name="filterBy" type="String"/>
    <aura:attribute name="orderBy" type="String"/>
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="allowActions" type="Boolean"/>
    <aura:attribute name="breadcrumbs" type="breadcrumbsWrapper"/>

    <aura:attribute name="showSaveMode" type="boolean" default="false"/>

    <aura:attribute name="records" type="Object" />
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="recordViewMode" type="Integer" default="1"/>
    <aura:attribute name="fieldLabelsMap" type="Map"/>
    <aura:attribute name="sortedByLabel" type="String"/>

    <aura:attribute name="customActions" type="List"/>
    <aura:attribute name="columnsWithActions" type="List" access="private"/>
     
    <!--user permissions for displaying buttons-->
    <aura:attribute name="newPermissions" type="Boolean"/> 
    <aura:attribute name="editPermissions" type="Boolean"/> 
    <aura:attribute name="deletePermissions" type="Boolean"/> 

    <!--filters-->
    <aura:attribute name="ShowFilters" type="Boolean" default="false" access="global" />


    <c:EnhancedRelatedListService aura:id="service"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <div class="slds-page-header slds-page-header_related-list">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <nav role="navigation" aria-label="Breadcrumbs">
                    <ol class="slds-breadcrumb slds-list_horizontal slds-wrap">
                        <li class="slds-breadcrumb__item"><a href="{!'/lightning/o/' + v.breadcrumbs.recordObjectSingular + '/list?filterName=Recent'}">{!v.breadcrumbs.recordObjectPlural}</a></li>
                        <li class="slds-breadcrumb__item"><a href="{!'/lightning/r/' + v.breadcrumbs.recordObjectSingular + '/' + v.recordId + '/view'}">{!v.breadcrumbs.recordName}</a></li>
                    </ol>
                </nav>
                <div class="slds-media">
                    <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <div class="slds-page-header__name-title">
                                <h1>
                                    <span class="slds-page-header__title slds-truncate" title="{!v.title}">{!v.title}</span>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-page-header__col-actions">
                <div class="slds-page-header__controls">
                    <aura:if isTrue="{!v.newPermissions}">  
                        <div class="slds-page-header__control">
                            <lightning:button label="New" onclick="{!c.handleCreateRecord}"/>
                        </div>
                    </aura:if>
                </div>
            </div>
        </div>
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-meta">
                <p class="slds-page-header__meta-text">{!v.records.length} items • sorted by {!v.sortedByLabel}</p>
            </div>
            <div class="slds-page-header__col-controls">
                <div class="slds-page-header__controls">
                    <div class="slds-page-header__control">
                        <lightning:buttonIcon iconName="utility:filterList" variant="border-filled" onclick="{!c.ToggleFilters}"/>
                    </div>
                    <div class="slds-page-header__control">
                        <lightning:buttonIcon iconName="utility:refresh" variant="border-filled" onclick="{!c.refreshView}"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pageBody">
        <div style="display: flex;">
            <div id="datatable">
                <lightning:datatable aura:id="table" class="related-list"
                                        columns="{!v.allowActions ? v.columnsWithActions: v.columns}"
                                        data="{! v.records }"
                                        keyField="id"
                                        hideCheckboxColumn="true"
                                        showRowNumberColumn="true"
                                        resizeColumnDisabled="false"
                                        sortedBy="{!v.orderBy}"
                                        sortedDirection="{!v.sortedDirection}"
                                        onsort="{!c.updateColumnSorting}"
                                        minColumnWidth = "{!v.minColumnWidth}"
                />
            </div>
            <aura:renderIf isTrue="{!v.ShowFilters}">
                <div class="slds-grid slds-no-flex filters">
                   
                </div>
            </aura:renderIf>
        </div>
        <footer role="contentinfo"  style="height: 60px;">
            <div class="slds-grid slds-p-around_medium" style="justify-content: center !important;">
                <aura:if isTrue="{!v.recordViewMode == 1}"> 
                    <lightning:button label="View All" onclick="{!c.handleViewAll}"/>
                </aura:if>
            </div>
        </footer>

        <aura:if isTrue="{!v.showSaveMode}">
            <div class="slds-spinner_container" style="background-color: transparent !important;">
                <div class="slds-spinner_brand slds-spinner slds-spinner_medium slds-is-relative">
                    <span class="slds-assistive-text">Loading</span>
                    <div class="slds-spinner__dot-a"></div>
                    <div class="slds-spinner__dot-b"></div>
                </div>
            </div>
            <div class="slds-backdrop slds-backdrop_open" style="opacity: 0.3 !important;"></div>
        </aura:if>
    </div>

    

</aura:component>

controller:

({
    init: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        cmp.set("v.title", myPageRef.state.c__title);
        cmp.set("v.sortedDirection", myPageRef.state.c__sortedDirection);
        cmp.set("v.minColumnWidth", myPageRef.state.c__minColumnWidth);
        cmp.set("v.fields", myPageRef.state.c__fields);
        cmp.set("v.sobjectApiName", myPageRef.state.c__sobjectApiName);
        cmp.set("v.fieldSourceApiName", myPageRef.state.c__fieldSourceApiName);
        cmp.set("v.fieldSourceType", myPageRef.state.c__fieldSourceType);
        cmp.set("v.relationshipPointer", myPageRef.state.c__relationshipPointer);
        cmp.set("v.orderBy", myPageRef.state.c__orderBy);
        cmp.set("v.filterBy", myPageRef.state.c__filterBy);
        cmp.set("v.recordId", myPageRef.state.c__recordId);
        cmp.set("v.allowActions", myPageRef.state.c__allowActions);
        cmp.set("v.breadcrumbs", JSON.parse(myPageRef.state.c__breadcrumbs));

        cmp.set("v.recordViewMode",1);
        helper.initView(cmp, event, helper);
    },
    
    handleRowAction: function (cmp, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');

        switch (action.name) {
            case 'edit':
                helper.editRecord(cmp, row)
                break;
            case 'delete':
                helper.removeRecord(cmp, row)
                break;
        }
    },

    handleCreateRecord : function (cmp, event, helper) {
        var createRecordEvent = $A.get("e.force:createRecord");
        createRecordEvent.setParams({
            "entityApiName": cmp.get("v.sobjectApiName"),
            "defaultFieldValues": {
                [cmp.get("v.relationshipPointer")] : cmp.get("v.recordId")
            }
        });
        createRecordEvent.fire();
    },  

    refreshView : function (component, event, helper) {
        $A.get('e.force:refreshView').fire();
    },

    updateColumnSorting: function (cmp, event, helper) {
        // We use the setTimeout method here to simulate the async
        // process of the sorting data, so that user will see the
        // spinner loading when the data is being sorted.
        setTimeout(function() {
            var fieldName = event.getParam('fieldName');
            var sortDirection = event.getParam('sortDirection');
            cmp.set("v.orderBy", fieldName);
            cmp.set("v.sortedDirection", sortDirection);
            helper.sortData(cmp,event,helper,fieldName, sortDirection);
        }, 0);
    },

    handleViewAll: function (cmp, event, helper) {
        if(cmp.get("v.recordViewMode") != 0 ) {
            //cmp.set("v.showSaveMode", true);
            helper.Waiting(cmp);

            cmp.set("v.recordViewMode",0);
            helper.initView(cmp, event, helper);
        }
    },
    handleSelect: function (cmp, event) {
        // This will contain the string of the "value" attribute of the selected
        // lightning:menuItem
        var selectedMenuItemValue = event.getParam("value");
        alert("Menu item selected with value: " + selectedMenuItemValue);
    },
    ToggleFilters: function(cmp, event) {
        var newvalue = !cmp.get("v.ShowFilters");
        cmp.set("v.ShowFilters", newvalue);
        if(newvalue) {
            document.getElementById('datatable').style.width="80%";
        } else {
            document.getElementById('datatable').style.width="100%";
        }
    }
})

helper:

({
    
    initView: function (component, event, helper) {
        helper.service(component).initView(
            component.get("v.fieldSourceType"),
            component.get("v.sobjectApiName"),
            component.get("v.fieldSourceApiName"),
            $A.getCallback(function(error,cols,fields,lookups,fieldsMap) {
                if(!error) {
                    component.set('v.columns', cols);
                    component.set('v.fields', fields);
                    component.set('v.fieldLabelsMap',fieldsMap);
                    
                    helper.fetchData(component, event, helper,lookups);

                } else {
                    console.log(error);
                }
            })
        );
    },

    initColumnsWithActions: function (cmp, event, helper) {
        helper.service(cmp).initColumnsWithActions(
            cmp.get('v.customActions'),
            cmp.get('v.editPermissions'),
            cmp.get('v.deletePermissions'),
            cmp.get('v.columns'),
            $A.getCallback(function(error, columnsWithActions) {
                if(!error) {
                    cmp.set('v.columnsWithActions', columnsWithActions);
                    //cmp.set("v.showSaveMode", false);
                    helper.DoneWaiting(cmp);
                } else {
                    console.log(error);
                }
            })
        );
    },

    fetchData: function (cmp, event, helper,lookups) {
        helper.service(cmp).fetchRecords(
            cmp.get("v.recordId"),
            cmp.get("v.fields"),
            cmp.get("v.recordViewMode"),
            cmp.get("v.relationshipPointer"),
            -1,
            cmp.get("v.sobjectApiName"),
            cmp.get("v.filterBy"),
            cmp.get("v.orderBy"),
            lookups,
            null,
            $A.getCallback(function(error, records,iconName,sobjectLabel,sobjectLabelPlural,parentRelationshipApiName,numberOfRecordsForTitle,newPermissions,editPermissions,deletePermissions,breadcrumbs) {
                if(!error) {
                    cmp.set('v.records', records);
                    cmp.set('v.newPermissions', newPermissions);
                    cmp.set('v.editPermissions', editPermissions);
                    cmp.set('v.deletePermissions', deletePermissions);
                    helper.setSortedByLabelFromMap(cmp);
                    helper.initColumnsWithActions(cmp, event, helper);
                } else {
                    console.log(error);
                }
            })
        );
    },

    setSortedByLabelFromMap: function(cmp) {
        var fieldApiName = cmp.get("v.orderBy");
        var fieldMap = JSON.parse(JSON.stringify(cmp.get('v.fieldLabelsMap')));
        
        cmp.set('v.sortedByLabel',fieldMap[fieldApiName]);

        if(fieldApiName == 'LastModifiedDate') {
            cmp.set('v.sortedByLabel','Last Modified Date');    
        }
    },
    sortData: function (cmp,event, helper,fieldName, sortDirection) {
        helper.service(cmp).sortData(
            cmp.get("v.records"),
            fieldName,
            sortDirection,
            $A.getCallback(function(error, data) {
                if(!error) {
                    cmp.set('v.records', data);
                    helper.setSortedByLabelFromMap(cmp);
                } else {
                    console.log(error);
                }
            })
        );
    },

    service : function(component) {
        return component.find("service");
    },

    editRecord: function (cmp, row) {
        var createRecordEvent = $A.get("e.force:editRecord");
        createRecordEvent.setParams({
            "recordId": row.Id
        });
        createRecordEvent.fire();
    },

    removeRecord: function (cmp, row) {
        var modalBody;
        var modalFooter;
        var sobjectLabel = cmp.get('v.sobjectLabel')
        $A.createComponents([
            ["c:deleteRecordContent", { sobjectLabel: sobjectLabel }],
            ["c:deleteRecordFooter", { record: row, sobjectLabel: sobjectLabel }]
        ],
            function (components, status) {
                if (status === "SUCCESS") {
                    modalBody = components[0];
                    modalFooter = components[1];
                    cmp.find('overlayLib').showCustomModal({
                        header: "Delete " + sobjectLabel,
                        body: modalBody,
                        footer: modalFooter,
                        showCloseButton: true
                    })
                }
            }
        );
    },

    DoneWaiting: function(component) {
        var table = component.find("table");
        $A.util.removeClass(table, "working");
      },

      Waiting: function(component) {
        var table = component.find("table");
        $A.util.addClass(table, "working");
      },
})

** UPDATE ** After adding the following:

<aura:handler name="change" value="{!v.pageReference}" action="{!c.init}"/> 

it works, but now when i press the second component, i get this column width: enter image description here

instead of enter image description here

12
  • 5
    Are you storing any state or data in the helper? The helper is a singleton that's shared across all instances of the same component. If something is stored/referenced there, you could easily see the same behavior across both instances of the component.
    – pchittum
    Aug 11, 2020 at 9:41
  • @pchittum how do i use a state? And how is something stored in the helper?
    – Dana Griff
    Aug 24, 2020 at 12:29
  • since you have not shared your complete code,you can also try using change handler in your second component on refrence change reinitialize the component like <aura:handler name="change" value="{!v.pageReference}" action="{!c.init}"/>
    – User6670
    Aug 25, 2020 at 11:51
  • 1
    @Dana Griff Can you share your full code with controller and helpers? Aug 25, 2020 at 12:51
  • @MohithShrivastava please see full code
    – Dana Griff
    Aug 26, 2020 at 9:48

1 Answer 1

6
+100

You can add a change handler to detect changes in page reference so that whenever it changes the component can be reinitialize like this

<aura:handler name="change" value="{!v.pageReference}" action="{!c.init}"/> 

about the table width you can try removing style="display: flex;" from the div

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.