[SalesForce] Lighting datatable Custom Inline Edit

I have a custom LWC Page which is used as Public site.

In my Page I have form which will populate the data in Contact object and display the value in Data table.

I have integrated inline edit in my data table by Using updateRecord, I'm getting Invalid Privileges.

So i was trying to update the field value by calling Apex Controller.

 <lightning-datatable key={stu.Id} key-field="Id" data={stu.spitems} columns={studentProgram}
                                data-record-id={studentsData.studentId} draft-values={draftValues}
                                hide-checkbox-column="true" 
                                onsave={handleInlineEdit} show-row-number-column=false>
                            </lightning-datatable>

handleInlineEdit(event) {
    var draftValuesStr = JSON.stringify(event.detail.draftValues);
    alert(draftValuesStr);
}

I'm editing the two row's value in the data table, On click save calling the handleInlineEdit method, draftValuesStr have JSON value like Below

[
{
    "StartDate": "2020-05-10",
    "Id": "a022w0000033ckoTFC"
},
{
    "StartDate": "2020-05-03",
    "Id": "a022w0000033ckpFDC"
}
]

I can pass this draftValuesStr to APEX controller, my question here is – How we can update the value in each row by Id in APEX. Please help me on this.

Best Answer

If you mean how to deserialize draftValueStr for updating existing Contacts, then it would be better to create wrapper class and use JSON.deserialize() method:

public class ContactWrapper {
    public String StartDate;
    public String Id;
}

String draftValueStr = '[{"StartDate": "2020-05-10","Id": "a022w0000033ckoTFC"},{"StartDate": "2020-05-03","Id": "a022w0000033ckpFDC"}]';

List<ContactWrapper> drafts = (List<ContactWrapper>) JSON.deserialize(draftValueStr, List<ContactWrapper>.class);

Then iterate the list to get ids, select contacts and update them:

Set<Id> ids = new Set<Id>();
for (ContactWrapper draft : drafts) {
    ids.add((Id) draft.Id);
}
Map<Id, Contact> contacts = new Map<Id, Contact>([SELECT StartDate FROM Contact WHERE Id IN :ids]);

for (ContactWrapper draft : drafts) {
    if (contacts.get(draft.Id) != null) {

        // there we need some date formatting
        // to get Date from draft.StartDate
        Date draftDate = someFunctionToFormatDate(draft.StartDate);

        contact.get(draft.Id).StartDate = draftDate;
    }
}
update contacts.values();

Related Solutions

[SalesForce] Can we use Accordion Feature in Lightning-datatable LWC

On the assumption I've understood your question correctly, we have done this as follows:

Extend the data table to support a custom cell data type:

import LightningDatatable from 'lightning/datatable';
import matchCell from './exampleMatchCell.html';

/**
 * Extends the lightning-datatable component to add a custom matchScore cell type.
 * This custom cell uses a lightning-accordion to show a single collapsible section with an icon.
 */
export default class ExampleResultsTable extends LightningDatatable {
    static customTypes = {
        matchScore: {
            template: matchCell
        }
    }
}

Provide the custom cell rendering (exampleMatchCell.html):

<template>
    <lightning-accordion allow-multiple-sections-open>
        <lightning-accordion-section name="breakdown" label={value.percentage}>
            <lightning-icon slot="actions" icon-name={value.icon} variant={value.iconVariant}></lightning-icon>
            <template for:each={value.notes} for:item="note">
                <p class="slds-truncate" title={note.value} key={note.key}>{note.value}</p>
            </template>
        </lightning-accordion-section>
    </lightning-accordion>
</template>

Use this custom component in the parent rendering instead of the standard data table:

        ...
        <c-example-results-table
                key-field="Id"
                data={_results}
                columns={_columns}
                onrowaction={handleRowActions}
                hide-checkbox-column>
        </c-example-results-table>

Have the parent define the columns including the custom type:

            ...
            this._columns.push({
                fieldName: 'score',
                label: this.Label.ColumnMatch,
                type: 'matchScore',
                initialWidth: 250,
                fixedWidth: undefined,
                typeAttributes: {}
            });
            ...

For us, our datatable gets rendered like the following example, where the "Match" column is the one containing an accordion:

The row height adjusts depending on whether the accordion is open or closed, as illustrated.

You will find documentation about handling columns with "custom data types" under "Creating Custom Data Types".

[SalesForce] draftValues in lightning-datatable lwc

Data bindings in LWC are always from parent to child, and never from child to parent. That is to say, it is impossible for an LWC to directly update the parent's data. You can read more about it in the @api decorator documentation. I refer to you to the LWC OSS documentation on this, as it's more complete.

Technically, the only documented way to access the new draft values is to handle the onsave event. You may also be able to read the values directly, as in:

this.template.querySelector('c-custom-lightning-datatable').draftValues;

However, since API (public) properties are supposed to be read-only, I'm not sure this would work. Either way, you cannot expect this.draftValues to be updated in the parent automatically.

Best Answer

Related Solutions

[SalesForce] Can we use Accordion Feature in Lightning-datatable LWC

[SalesForce] draftValues in lightning-datatable lwc

Related Topic