1

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}
]

enter image description here enter image description here enter image description here

  • Can you add a screenshot showing how the html uses this data for displaying it? – CommonCoreTawan Sep 25 at 19:29
  • Sure. I added it immediately after the code sample. I would like to have the modal show the same information, plus some extra fields found in the JSON payload – thomnguyen Sep 25 at 20:02
  • I'm saying the actual HTML code, not what's displayed :) – CommonCoreTawan Sep 25 at 20:05
  • okay, just added – thomnguyen Sep 25 at 20:10
  • So the data displayed matches exactly the JSON object you are creating in JS (3rd line in your code). The values are string literals, for example '?','entryPoint', etc...So they would display as strings in HTML because they are javascript strings, they are not variables which hold some value. – CommonCoreTawan Sep 25 at 20:21
0

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 passed Id 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:

{ label: 'DETAILS', type: 'detailsButton', fieldName: 'Id', fixedWidth: 70, cellAttributes: { alignment: "center" }}

In the custom component dispatch event with composed and bubbles as true so that it becomes API for datatable:

this.dispatchEvent(new CustomEvent('showmodal', {
        detail: {
            recordId: this.recordId
        },
        bubbles: true,
        composed: true
    }));

You should define @api recordId and assign the value to recordId in custom component template so that value comes from mentioned fieldName - which is Id. You can refer to this example for understanding importance of value in template.

Now in the parent component handle the event:

<c-my-datatable onshowmodal={handleShowModal}
  • Hi, sorry I'm not completely following. The "Trip Details" are not persisted or stored in salesforce; they are acquired via an API call and stored in the Trips variable. I'm not sure how recordId would help me in this case. I need to effectively be able to send multiple fieldName parameters to the modal component. – thomnguyen Sep 25 at 19:22
  • If not record Id, then some other record identifier, some field which will have unique values. With help of that value you can get rest of the row values in parent and show in modal in parent – salesforce-sas Sep 25 at 19:27
  • Is it possible to populate the modal with trip details that are not displayed in the table row, but exist in the trips JSON payload? – thomnguyen Sep 25 at 19:29

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.