I have a custom datatable with a custom column type containing a button, and a modal that pops up after the button is clicked.
I am having trouble figuring out how to send my datatable data to the modal and have it appear in the modal. The data is returned in JSON format, but when I reference the field names like I do in the other columns, salesforce treats them like strings rather than variables.
Please see attached screenshots.
Any help would be much appreciated!
@track columns = [
{ label: 'DETAILS', type: 'detailsButton', fieldName: 'details', fixedWidth: 70, cellAttributes: { alignment: "center" }, typeAttributes:
{
car: '?',
tag: '?',
entryDateTime: 'this.trips.entryDateTime',
entryPoint: 'entryPoint',
exitDateTime: 'exitDateTime',
exitPoint: 'exitPoint',
}
},
{ label: 'COLOR', fieldName: 'color', type: 'text', fixedWidth: 90},
{ label: 'CAR', fieldName: 'car', type: 'text', initialWidth: 90, sortable: true},
{ label: 'TAG', fieldName: 'tag', type: 'text', fixedWidth: 70, sortable: true},
{ label: 'ENTRY DATE/TIME', fieldName: 'entryDateTime', type: 'text', sortable: true},
{ label: 'ENTRY POINT', fieldName: 'entryPoint', type: 'text', sortable: true},
{ label: 'EXIT DATE/TIME', fieldName: 'exitDateTime', type: 'text', sortable: true},
{ label: 'EXIT POINT', fieldName: 'exitPoint', type: 'text', sortable: true}
]
Best Answer
Ideally you should fire event with data of record identifier (
Id
field) which should be handled in parent component for fetching whole record based on passedId
and then showing record data in modal and the modal should be implemented in parent component which will show up in this event handler.Explanation:
just pass the Id for fieldName without typeAttributes as below:
In the custom component dispatch event with composed and bubbles as true so that it becomes API for datatable:
You should define
@api recordId
and assign thevalue
to recordId in custom component template so that value comes from mentioned fieldName - which isId
. You can refer to this example for understanding importance ofvalue
in template.Now in the parent component handle the event: