If I’m on an account and I want to quickly edit some of the information on my child records, I can create a button next to each record that will open a modal, which will allow me to edit the record and then return to my parent account record.
Apex Controller:
public with sharing class ContactsController {
@AuraEnabled(cacheable = true)
public static List<Contact> getContacts(id accountId){
return [SELECT Id, FirstName, LastName, Phone, Email FROM Contact WHERE accountId =:accountId];
}
}
Javascript controller (contactDataTable.js):
import { LightningElement, wire, track, api } from 'lwc';
import getContacts from '@salesforce/apex/ContactsController.getContacts';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import {refreshApex} from '@salesforce/apex';
const columns = [
{ label: 'FirstName', fieldName: 'FirstName'},
{ label: 'LastName', fieldName: 'LastName'},
{ label: 'Phone', fieldName : 'Phone', type: 'phone'},
{ label: 'Email', fieldName: 'Email', type: 'email'},
{ label: 'Edit', type: 'button-icon', initialWidth: 75,
typeAttributes: {
iconName: 'action:edit',
title: 'Edit',
variant: 'border-filled',
alternativeText: 'Edit'
}
}
];
export default class ContactDataTable extends LightningElement {
//reactive
@api recordId;
@track columns = columns;
@track bShowModal = false;
@track currentRecordId;
@track contacts;
@track error;
wiredContactsResult;
@wire(getContacts,{ accountId: '$recordId'})
wiredContacts(result){
this.wiredContactsResult = result;
if(result.data){
this.contacts = result.data;
this.error = undefined;
} else if(result.error){
this.error = result.error;
this.contacts = undefined;
}
}
handleRowAction(event){
const row = event.detail.row;
this.record = row;
this.bShowModal = true;
this.editCurrentRecord(row);
}
// closing modal box
closeModal() {
this.bShowModal = false;
}
handleSubmit(event){
event.preventDefault();
this.template.querySelector('lightning-record-edit-form').submit(event.detail.fields);
this.bShowModal = false;
this.dispatchEvent(new ShowToastEvent({
title: 'Success!!',
message: event.detail.fields.FirstName +' Contact updated Successfully!!',
variant: 'success'
}),);
}
handleSuccess() {
return refreshApex(this.wiredContactsResult);
}
editCurrentRecord(currentRow){
this.currentRecordId = currentRow.Id;
}
}
Html (contactDataTable.html):
<template>
<lightning-card title="Contacts" icon-name="standard:contact">
<lightning-datatable data={contacts}
columns={columns}
key-field="id"
hide-checkbox-column="true"
onrowaction={handleRowAction}>
</lightning-datatable>
<template if:true={bShowModal}>
<section role="dialog" tabindex="-1"
aria-labelledby="modal-heading-01"
aria-modal="true"
aria-describedby="modal-content-id-1"
class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<dl class="slds-list_horizontal slds-wrap">
<lightning-record-edit-form layout-type="Full" record-id={currentRecordId} object-api-name="Contact" onsubmit={handleSubmit} onsuccess={handleSuccess}>
<lightning-messages></lightning-messages>
<lightning-input-field field-name="FirstName"></lightning-input-field>
<div style="text-align:center;">
<lightning-button class="slds-m-top_small"
variant="brand"
type="submit"
name="update"
label="Update Record"></lightning-button>
</div>
</lightning-record-edit-form><br/>
</dl>
</div>
<!-- modal footer start-->
<footer class="slds-modal__footer">
<lightning-button variant="brand"
label="Close"
title="Close"
onclick={closeModal}
></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</lightning-card>
</template>
See the code on github : https://github.com/tjkingsbury/ContactModalUpdate