Apex Code Development You need to sign in to do that
Don't have an account?
jishan roy I want to update my contact phone field by using button.
In my code I display contact record in account record page my first name and lastname fields is read only i want to edit my phone field when click on update button phone field are updated;
here is my code:
html:
<template>
<lightning-card title="Update Contacts on Account Page" custom-icon="custom:icon13">
<table class="slds-table slds-table_cell-buffer slds-table_bordered" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<template if:true={record}>
<tr>
<td><b>FirstName</b></td>
<td><b>LastName</b></td>
<td><b>Phone</b></td>
</tr>
<template for:each={record} for:item="acc">
<tr key={acc.Id}>
<td><lightning-input label="First Name" value={acc.FirstName} data-field="FirstName" onchange={handleChange} class="slds-m-bottom_x-small" readonly="true"></lightning-input></td>
<td><lightning-input label="Last Name" value={acc.LastName} data-field="LastName" onchange={handleChange} class="slds-m-bottom_x-small" readonly="true" required></lightning-input></td>
<td><lightning-input label="Last Name" value={acc.Phone} data-field="Phone" onchange={handleChange} class="slds-m-bottom_x-small" ></lightning-input></td>
</tr>
</template>
<lightning-button label="update" variant="brand" onclick={handleUpdate}></lightning-button>
</template>
</table>
</lightning-card>
</template>
js:
import { LightningElement,api,wire,track } from 'lwc';
import getContacts from '@salesforce/apex/contactController.getContacts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
import { updateRecord } from 'lightning/uiRecordApi';
import ID_FIELD from '@salesforce/schema/Contact.Id';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';
export default class contactAccountInfo extends LightningElement {
@api recordId;
@api errorMessage;
@track record;
@track error;
@track contactId;
@track firstName;
@track lastName;
@track phone;
fields = [LAST_NAME_FIELD,FIRST_NAME_FIELD, ID_FIELD,PHONE_FIELD];
@wire(getContacts, { accId: '$recordId' })
cons({error,data}){
console.log('recordId',this.recordId);
if (data) {
console.log('>>>data: ' + JSON.stringify(data));
this.record = data;
this.error = undefined;
console.log('recordId',this.record);
} else if (error) {
this.error = error;
this.data = undefined;
}
}
handleUpdate(event) {
// Display field-level errors and disable button if a name field is empty.
this.data=event.target.value;
console.log('recordId' + data);
updateRecord({
accId:this.data
})
.then(()=>{
console.log('SUCCESS');
return refreshApex(this.data);
})
.catch((error)=>{
this.errorMessage=error;
console.log('unable to update the record due to'+JSON.stringify(this.errorMessage));
})
}
}
help me out of this:
here is my code:
html:
<template>
<lightning-card title="Update Contacts on Account Page" custom-icon="custom:icon13">
<table class="slds-table slds-table_cell-buffer slds-table_bordered" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<template if:true={record}>
<tr>
<td><b>FirstName</b></td>
<td><b>LastName</b></td>
<td><b>Phone</b></td>
</tr>
<template for:each={record} for:item="acc">
<tr key={acc.Id}>
<td><lightning-input label="First Name" value={acc.FirstName} data-field="FirstName" onchange={handleChange} class="slds-m-bottom_x-small" readonly="true"></lightning-input></td>
<td><lightning-input label="Last Name" value={acc.LastName} data-field="LastName" onchange={handleChange} class="slds-m-bottom_x-small" readonly="true" required></lightning-input></td>
<td><lightning-input label="Last Name" value={acc.Phone} data-field="Phone" onchange={handleChange} class="slds-m-bottom_x-small" ></lightning-input></td>
</tr>
</template>
<lightning-button label="update" variant="brand" onclick={handleUpdate}></lightning-button>
</template>
</table>
</lightning-card>
</template>
js:
import { LightningElement,api,wire,track } from 'lwc';
import getContacts from '@salesforce/apex/contactController.getContacts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
import { updateRecord } from 'lightning/uiRecordApi';
import ID_FIELD from '@salesforce/schema/Contact.Id';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';
export default class contactAccountInfo extends LightningElement {
@api recordId;
@api errorMessage;
@track record;
@track error;
@track contactId;
@track firstName;
@track lastName;
@track phone;
fields = [LAST_NAME_FIELD,FIRST_NAME_FIELD, ID_FIELD,PHONE_FIELD];
@wire(getContacts, { accId: '$recordId' })
cons({error,data}){
console.log('recordId',this.recordId);
if (data) {
console.log('>>>data: ' + JSON.stringify(data));
this.record = data;
this.error = undefined;
console.log('recordId',this.record);
} else if (error) {
this.error = error;
this.data = undefined;
}
}
handleUpdate(event) {
// Display field-level errors and disable button if a name field is empty.
this.data=event.target.value;
console.log('recordId' + data);
updateRecord({
accId:this.data
})
.then(()=>{
console.log('SUCCESS');
return refreshApex(this.data);
})
.catch((error)=>{
this.errorMessage=error;
console.log('unable to update the record due to'+JSON.stringify(this.errorMessage));
})
}
}
help me out of this:
Please use below code:-
template> <lightning-card title="Update Contacts on Account Page" custom-icon="custom:icon13"> <table class="slds-table slds-table_cell-buffer slds-table_bordered" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <template if:true={record}> <tr> <td><b>FirstName</b></td> <td><b>LastName</b></td> <td><b>Phone</b></td> </tr> <template for:each={record} for:item="acc"> <tr key={acc.Id}> <td><lightning-input label="First Name" value={acc.FirstName} data-field="FirstName" onchange={handleChange} class="slds-m-bottom_x-small" readonly="true"></lightning-input></td> <td><lightning-input label="Last Name" value={acc.LastName} data-field="LastName" onchange={handleChange} class="slds-m-bottom_x-small" readonly="true" required></lightning-input></td> <td><lightning-input label="Phone" name="phone" value={acc.Phone} data-field="Phone" onchange={handleChange} class="slds-m-bottom_x-small" ></lightning-input></td> </tr> </template> <lightning-button label="update" variant="brand" onclick={handleUpdate}></lightning-button> </template> </table> </lightning-card> </template> js: import { LightningElement,api,wire,track } from 'lwc'; import getContacts from '@salesforce/apex/contactController.getContacts'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import { refreshApex } from '@salesforce/apex'; import { updateRecord } from 'lightning/uiRecordApi'; import ID_FIELD from '@salesforce/schema/Contact.Id'; import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName'; import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName'; import PHONE_FIELD from '@salesforce/schema/Contact.Phone'; export default class contactAccountInfo extends LightningElement { @api recordId; @api errorMessage; @track record; @track error; @track contactId; @track firstName; @track lastName; @track phone; fields = [LAST_NAME_FIELD,FIRST_NAME_FIELD, ID_FIELD,PHONE_FIELD]; @wire(getContacts, { accId: '$recordId' }) cons({error,data}){ console.log('recordId',this.recordId); if (data) { console.log('>>>data: ' + JSON.stringify(data)); this.record = data; this.error = undefined; console.log('recordId',this.record); } else if (error) { this.error = error; this.data = undefined; } } handleChange(event){ if (event.target.name === "phone") { this.phone = event.target.value; } } handleUpdate(event) { // Display field-level errors and disable button if a name field is empty. this.fields[PHONE_FIELD.fieldApiName] = this.phone; //Create a config object that had info about fields. //Quick heads up here we are not providing Object API Name const recordInput = { fields: fields }; // Invoke the method updateRecord() updateRecord(recordInput).then((record) => { console.log(record); }); } }if you need any assistanse, Please let me know!!
Kindly mark my solution as the best answer if it helps you.
Thanks
Mukesh
your code had run but while i click on update button phone no was not update it will be as it is.
You need to use debug,
first in LWC :-
this.fields[PHONE_FIELD.fieldApiName] = this.phone;
console.log('PHONE VALUE==>>>>> '+JSON.stringify(this.fields));
Second need to check in Browser Console->>
// Invoke the method updateRecord()
updateRecord(recordInput).then((record) => { console.log(record); });
if you need any assistanse, Please let me know!!
Kindly mark my solution as the best answer if it helps you.
Thanks
Mukesh
thanks for your reply but still not fields is working.I think we have to use refresh apex.
check with below code:-
template> <lightning-card title="Update Contacts on Account Page" custom-icon="custom:icon13"> <table class="slds-table slds-table_cell-buffer slds-table_bordered" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <template if:true={record}> <tr> <td><b>FirstName</b></td> <td><b>LastName</b></td> <td><b>Phone</b></td> </tr> <template for:each={record} for:item="acc"> <tr key={acc.Id}> <td><lightning-input label="First Name" value={acc.FirstName} data-field="FirstName" onchange={handleChange} class="slds-m-bottom_x-small" readonly="true"></lightning-input></td> <td><lightning-input label="Last Name" value={acc.LastName} data-field="LastName" onchange={handleChange} class="slds-m-bottom_x-small" readonly="true" required></lightning-input></td> <td><lightning-input label="Phone" name="phone" value={acc.Phone} data-field="Phone" onchange={handleChange} class="slds-m-bottom_x-small" ></lightning-input></td> </tr> </template> <lightning-button label="update" variant="brand" onclick={handleUpdate}></lightning-button> </template> </table> </lightning-card> </template> js: import { LightningElement,api,wire,track } from 'lwc'; import getContacts from '@salesforce/apex/contactController.getContacts'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import { refreshApex } from '@salesforce/apex'; import { updateRecord } from 'lightning/uiRecordApi'; import ID_FIELD from '@salesforce/schema/Contact.Id'; import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName'; import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName'; import PHONE_FIELD from '@salesforce/schema/Contact.Phone'; export default class contactAccountInfo extends LightningElement { @api recordId; @api errorMessage; @track record; @track error; @track contactId; @track firstName; @track lastName; @track phone; fields = [LAST_NAME_FIELD,FIRST_NAME_FIELD, ID_FIELD,PHONE_FIELD]; @wire(getContacts, { accId: '$recordId' }) cons({error,data}){ console.log('recordId',this.recordId); if (data) { console.log('>>>data: ' + JSON.stringify(data)); this.record = data; this.error = undefined; console.log('recordId',this.record); } else if (error) { this.error = error; this.data = undefined; } } handleChange(event){ if (event.target.name === "phone") { this.phone = event.target.value; } } handleUpdate(event) { const fields = {}; // Display field-level errors and disable button if a name field is empty. fields[PHONE_FIELD.fieldApiName] = this.phone; //Create a config object that had info about fields. //Quick heads up here we are not providing Object API Name const recordInput = { fields: fields }; // Invoke the method updateRecord() updateRecord(recordInput).then((record) => { refreshApex(this.record); }); } }if you need any assistanse, Please let me know!!
Kindly mark my solution as the best answer if it helps you.
Thanks
Mukesh
not getting solution not we have to try "index" element because it will work for multiple update.