Sign Up ›
  • Кирилл Кириченко
  • NEWBIE
  • 0 Points
  • Member since 2023
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
3 replies

Can’t find simple Inline edit custom table example

Hi!
I can’t find simple Inline edit custom table example like this:

User-added image

I have find desired example with datatable https://www.w3web.net/record-save-edit-field-inline-in-lwc/ (https://www.w3web.net/record-save-edit-field-inline-in-lwc/" style="color:#0563c1; text-decoration:underline) and with aura https://sfdcmonkey.com/2017/12/08/lightning-data-table-inline-editing/. I need same but with custom table, not with datatable, not with aura. I was given a link to a Inline edit snippet https://www.salesforcebolt.com/2021/09/ep-35-custom-inline-editing.html (https://www.salesforcebolt.com/2021/09/ep-35-custom-inline-editing.html" style="color:#0563c1; text-decoration:underline" target="_blank). But I can’t to interpose this fragment that the full table turned out. Please, tell me where can I find such an example?
My attempt:

Html
<template>
    <lightning-card title="Account" >
        <table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" class="tblColPad">
            
            <tr>
                <th>Name</th>
                <th>Rating</th>
                <th>Dalete</th>
            </tr>

            <template for:each={getAccount.data} for:item="accountItem">
                <tr key={accountItem.Id}>
                    <td>
           <template if:false={editName}>
                            <span style="border-bottom: 1px dotted black"
                              >{accountItem.Name}
                              <lightning-button-icon
                                class="slds-float_right"
                                icon-name="utility:edit"
                                alternative-text="Update Name"
                                title="Update Name"
                                variant="bare"
                                size="medium"
                                onclick={handleNameEdit}
                              ></lightning-button-icon>
                            </span>
                          </template>

                          <template if:true={editName}>
                            <lightning-input
                              name="accountItem.Id"
                              value={accountItem.Name}
                              label=""
                              onchange={handleNameChange}
                            ></lightning-input>
                            <lightning-button-icon
                              class="slds-float_right"
                              icon-name="utility:save"
                              alternative-text="Update Name"
                              title="Update Name"
                              variant="bare"
                              size="large"
                              onclick={handleUpdateName}
                            ></lightning-button-icon>
                          </template>

         </td>
                    <td>{accountItem.Rating}</td>
                    <td><lightning-button label="Delete" size="small" variant="neutral" 
                    onclick={handleDelete} value={accountItem.Id} 
                    icon-name="utility:delete" icon-position="right" 
                    class="deleteButton"></lightning-button></td>
                </tr>
            </template>

        </table>
    </lightning-card>
</template>

Js
import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/ProjectFour.getAccounts';
import {deleteRecord} from 'lightning/uiRecordApi';
import {refreshApex} from '@salesforce/apex';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
 
export default class ProjectFourCustom extends LightningElement {
    
  @wire (getAccounts) getAccount;
  @track recordId;
 
@track account;
  @track accountId;
  @track accountName;
  @track accountItem
  @track error;
  @track editName = false;

//   connectedCallback() {
//     getAccounts()
//       .then((result) => {
//         this.accountId = result.Id;
//         this.accountName = result.Name;
//       })
//       .catch((error) => {
//         this.error = error;
//       });
//   }

handleNameEdit(event) {
   console.log('handleNameEdit', event);
   this.editName = true;
 }

 handleNameChange(event) {
   console.log('handleNameChange', event);
   this.accountItem = event.target.value;
 }

 handleUpdateName(event) {
   console.log('handleUpdateName', event);
   const fields = {};
   fields[ID_FIELD.fieldApiName] = this.accountId;
   fields[NAME_FIELD.fieldApiName] = this.accountItem;

   const recordInput = { fields };

   updateRecord(recordInput)
     .then(() => {
       console.log('Done', event);
       this.editName = false;
     })
     .catch((error) => {
       console.log("Error updating date => " + error.body.message);
     });
 }


  handleDelete(event){
     this.recordId = event.target.value;
     deleteRecord(this.recordId) 
     .then(() =>{
 
        return refreshApex(this.getAccount);
        
     })
     .catch(error =>{
         window.console.log('Unable to delete record due to ' + error.body.message);
     });
  }
  
}