You need to sign in to do that
Don't have an account?
Abhishek Sharma 527
variable is read only error - lwc
Hello, I have LWC to show contact records and modal to edit the records, while editing record it shows error as fields are read-only, can anyone help.
// html
<template>
<lightning-card title="Contact Records">
<lightning-datatable data={wireContact.data} columns={columns} key-field="id" hide-checkbox-column="true" onrowaction={handleRowAction} ></lightning-datatable>
<template if:true={modalContainer}>
<section class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModalAction}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
</button>
<h2 class="slds-text-heading_medium slds-hyphenate">Contact Record Detail</h2>
</header>
<div class="slds-modal__content slds-p-around_medium">
<table class="slds-table slds-table_bordered slds-table_col-bordered slds-table_cell-buffer">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Name</th>
<th>Phone Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><lightning-input
type="text"
label="First name"
value={contactRow.FirstName}
onchange={handleChange}>
</lightning-input></td>
<td><lightning-input
type="text"
label="Last name"
value={contactRow.LastName}
onchange={handleChange}>
</lightning-input></td>
<td><lightning-input
type="Email"
label="Email"
value={contactRow.Email}
onchange={handleChange}>
</lightning-input></td>
<td><lightning-input
type="tel"
label="Phone"
value={contactRow.Phone}
onchange={handleChange}>
</lightning-input> </td>
</tr>
</tbody>
</table>
</div>
<footer class="slds-modal__footer">
<lightning-button class="slds-p-horizontal_medium" id="btn1" variant="brand" label="Close" title="Close" onclick={closeModalAction}></lightning-button>
<lightning-button class="slds-p-horizontal_medium" variant="brand" label="Save" title="Save" type="submit" onclick={handleSave}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</lightning-card>
</template>
----------------------------------------------
// JS code
import { LightningElement, track, wire } from 'lwc';
import getContacts from '@salesforce/apex/LWCExampleController.getContacts';
import saveRecords from '@salesforce/apex/LWCExampleController.saveRecords';
const columns=[
{label: 'View',type: 'button-icon', initialWidth: 75, typeAttributes: { iconName: 'action:preview', title: 'Preview',
variant: 'border-filled', alternativeText: 'View'}
},
{ label: 'First Name',fieldName: 'FirstName', editable: true},
{ label: 'Last Name', fieldName: 'LastName', editable: true},
{ label: 'Email', fieldName: 'Email'},
{ label: 'Phone', fieldName: 'Phone'}
];
export default class LwcDataTableRowAction extends LightningElement {
@track columns = columns;
@track contactRow={};
@track rowOffset = 0;
@track modalContainer = false;
@track saveDraftValues = [];
@track contacts;
@wire(getContacts) wireContact;
handleRowAction(event){
const dataRow = event.detail.row;
window.console.log('dataRow@@ ' + dataRow);
this.contactRow=dataRow;
window.console.log('contactRow## ' + dataRow);
this.modalContainer=true;
}
handleChange(event){
if(event.target.label=='First name'){
this.contactRow.FirstName = event.target.value;
}
if(event.target.label=='Last name'){
this.contactRow.LastName = event.target.value;
}
if(event.target.label=='Email'){
this.contactRow.Email = event.target.value;
}
if(event.target.label=='Phone'){
this.contactRow.Phone = event.target.value;
}
}
handleSave(){
saveRecords({ contactToUpdate: this.contactRow })
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});
}
closeModalAction(){
this.modalContainer=false;
}
}
-------------------------------------------------------
// apex class
public inherited sharing class LWCExampleController {
@AuraEnabled(Cacheable = true)
public static List<Contact> getContacts() {
return [SELECT Id, Name, FirstName, LastName, Phone, Email
FROM Contact
WHERE Email != null
AND Phone != null
ORDER BY CreatedDate DESC NULLS LAST limit 10];
}
@AuraEnabled
public static void saveRecords(Contact contactsToUpdate){
update contactsToUpdate;
}
}
// html
<template>
<lightning-card title="Contact Records">
<lightning-datatable data={wireContact.data} columns={columns} key-field="id" hide-checkbox-column="true" onrowaction={handleRowAction} ></lightning-datatable>
<template if:true={modalContainer}>
<section class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModalAction}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
</button>
<h2 class="slds-text-heading_medium slds-hyphenate">Contact Record Detail</h2>
</header>
<div class="slds-modal__content slds-p-around_medium">
<table class="slds-table slds-table_bordered slds-table_col-bordered slds-table_cell-buffer">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Name</th>
<th>Phone Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><lightning-input
type="text"
label="First name"
value={contactRow.FirstName}
onchange={handleChange}>
</lightning-input></td>
<td><lightning-input
type="text"
label="Last name"
value={contactRow.LastName}
onchange={handleChange}>
</lightning-input></td>
<td><lightning-input
type="Email"
label="Email"
value={contactRow.Email}
onchange={handleChange}>
</lightning-input></td>
<td><lightning-input
type="tel"
label="Phone"
value={contactRow.Phone}
onchange={handleChange}>
</lightning-input> </td>
</tr>
</tbody>
</table>
</div>
<footer class="slds-modal__footer">
<lightning-button class="slds-p-horizontal_medium" id="btn1" variant="brand" label="Close" title="Close" onclick={closeModalAction}></lightning-button>
<lightning-button class="slds-p-horizontal_medium" variant="brand" label="Save" title="Save" type="submit" onclick={handleSave}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</lightning-card>
</template>
----------------------------------------------
// JS code
import { LightningElement, track, wire } from 'lwc';
import getContacts from '@salesforce/apex/LWCExampleController.getContacts';
import saveRecords from '@salesforce/apex/LWCExampleController.saveRecords';
const columns=[
{label: 'View',type: 'button-icon', initialWidth: 75, typeAttributes: { iconName: 'action:preview', title: 'Preview',
variant: 'border-filled', alternativeText: 'View'}
},
{ label: 'First Name',fieldName: 'FirstName', editable: true},
{ label: 'Last Name', fieldName: 'LastName', editable: true},
{ label: 'Email', fieldName: 'Email'},
{ label: 'Phone', fieldName: 'Phone'}
];
export default class LwcDataTableRowAction extends LightningElement {
@track columns = columns;
@track contactRow={};
@track rowOffset = 0;
@track modalContainer = false;
@track saveDraftValues = [];
@track contacts;
@wire(getContacts) wireContact;
handleRowAction(event){
const dataRow = event.detail.row;
window.console.log('dataRow@@ ' + dataRow);
this.contactRow=dataRow;
window.console.log('contactRow## ' + dataRow);
this.modalContainer=true;
}
handleChange(event){
if(event.target.label=='First name'){
this.contactRow.FirstName = event.target.value;
}
if(event.target.label=='Last name'){
this.contactRow.LastName = event.target.value;
}
if(event.target.label=='Email'){
this.contactRow.Email = event.target.value;
}
if(event.target.label=='Phone'){
this.contactRow.Phone = event.target.value;
}
}
handleSave(){
saveRecords({ contactToUpdate: this.contactRow })
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});
}
closeModalAction(){
this.modalContainer=false;
}
}
-------------------------------------------------------
// apex class
public inherited sharing class LWCExampleController {
@AuraEnabled(Cacheable = true)
public static List<Contact> getContacts() {
return [SELECT Id, Name, FirstName, LastName, Phone, Email
FROM Contact
WHERE Email != null
AND Phone != null
ORDER BY CreatedDate DESC NULLS LAST limit 10];
}
@AuraEnabled
public static void saveRecords(Contact contactsToUpdate){
update contactsToUpdate;
}
}
Can you check the below example with similar approach.
https://www.w3web.net/record-save-edit-field-inline-in-lwc/
Let me know if you face any issues.
If this solution helps, Please mark it as best answer.
Thanks,