I have an aura component that's being used twice in the same layout. This component mimics related lists:
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:
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:
instead of
