EP-35 | Custom inline editing functionality in Lightning Web Component | LWC Stack ☁️⚡️

Kapil September 17, 2021

 LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !

In this post you can check complete code of LWC Stack Episode 35.


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<template>
  <lightning-card title="Custom Inline Edit" icon-name="utility:edit">
    <div style="padding: 10px; font-weight: bold; width: 250px">
      <div class="slds-grid slds-gutters">
        <div class="slds-col">
          <span>Hello I am</span>
        </div>
        <div class="slds-col">
          <template if:false={editFirstName}>
            <span style="border-bottom: 1px dotted black"
              >{firstName}
              <lightning-button-icon
                class="slds-float_right"
                icon-name="utility:edit"
                alternative-text="Update First Name"
                title="Update First Name"
                variant="bare"
                size="medium"
                onclick={handleFirstNameEdit}
              ></lightning-button-icon>
            </span>
          </template>
          <template if:true={editFirstName}>
            <lightning-input
              name="fileExpirationDate"
              value={firstName}
              label=""
              onchange={handleFirstNameChange}
            ></lightning-input>
            <lightning-button-icon
              class="slds-float_right"
              icon-name="utility:save"
              alternative-text="Update First Name"
              title="Update First Name"
              variant="bare"
              size="large"
              onclick={handleUpdateFirstName}
            ></lightning-button-icon>
          </template>
        </div>
      </div>
    </div>
  </lightning-card>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import { LightningElement, wire, track } from "lwc";
import { refreshApex } from "@salesforce/apex";
import getSingleContact from "@salesforce/apex/ContactController.getSingleContact";
import { updateRecord } from "lightning/uiRecordApi";
import ID_FIELD from "@salesforce/schema/Contact.Id";
import FIRSTNAME_FIELD from "@salesforce/schema/Contact.FirstName";

export default class CustomInlineEditing extends LightningElement {
  @track contact;
  @track contactId;
  @track firstName;
  @track error;
  @track editFirstName = false;
  connectedCallback() {
    getSingleContact()
      .then((result) => {
        this.contactId = result.Id;
        this.firstName = result.FirstName;
      })
      .catch((error) => {
        this.error = error;
      });
  }
  handleFirstNameEdit() {
    this.editFirstName = true;
  }
  handleFirstNameChange(event) {
    this.firstName = event.target.value;
  }
  handleUpdateFirstName() {
    const fields = {};
    fields[ID_FIELD.fieldApiName] = this.contactId;
    fields[FIRSTNAME_FIELD.fieldApiName] = this.firstName;

    const recordInput = { fields };

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


Output



Watch Complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments