Form Component

lightning-record-form

Deskripsi: Komponen ini adalah solusi all-in-one untuk menampilkan, mengedit, atau membuat catatan (record) dalam Salesforce. Ini adalah komponen yang paling mudah digunakan karena menggabungkan fungsi dari tampilan dan pengeditan dalam satu komponen.

Kegunaan: Sangat berguna ketika Anda ingin menampilkan formulir yang dapat digunakan untuk melihat, mengedit, atau membuat catatan baru tanpa harus menulis banyak kode. Komponen ini secara otomatis menangani layout dan validasi berdasarkan metadata objek.

lightning-record-view-form

Deskripsi: Komponen ini digunakan khusus untuk menampilkan data dari satu catatan (record) dalam Salesforce. Ini memberikan kontrol lebih besar kepada pengembang untuk menentukan bagaimana data ditampilkan.

Kegunaan: Ideal untuk situasi di mana Anda hanya perlu menampilkan data tanpa memberikan opsi untuk mengedit. Anda dapat mengkustomisasi tampilan dengan lebih detail dibandingkan dengan lightning-record-form.

lightning-record-edit-form

Deskripsi: Komponen ini digunakan untuk mengedit atau membuat catatan baru. Ini memberikan kontrol lebih besar kepada pengembang untuk menentukan tata letak dan elemen yang digunakan dalam formulir.

Kegunaan: Berguna ketika Anda memerlukan kontrol lebih besar atas tampilan dan perilaku formulir pengeditan. Anda dapat menambahkan logika kustom dan elemen UI tambahan yang tidak tersedia di lightning-record-form.

Ketiga komponen ini memanfaatkan Lightning Data Service untuk berinteraksi dengan data Salesforce, yang berarti mereka menangani banyak detail teknis seperti caching dan pengelolaan data secara otomatis.

Contoh

lightning-record-form

<template>
    <lightning-card title="Contact Record Form">
        <lightning-record-form
            object-api-name="Contact"
            record-id={recordId}
            fields={fields}
            columns="2"
            mode="view"
            onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';

export default class ContactRecordForm extends LightningElement {
    @api recordId;
    fields = [FIRSTNAME_FIELD, LASTNAME_FIELD, EMAIL_FIELD, PHONE_FIELD];

    handleSuccess(event) {
        const evt = new ShowToastEvent({
            title: 'Contact updated',
            message: 'The contact record has been successfully updated',
            variant: 'success',
        });
        this.dispatchEvent(evt);
    }
}

Dalam contoh ini, lightning-record-form digunakan untuk menampilkan dan mengedit kontak. Komponen ini menangani layout, validasi, dan penyimpanan secara otomatis.

lightning-record-view-form

<template>
    <lightning-card title="Contact Details">
        <lightning-record-view-form
            record-id={recordId}
            object-api-name="Contact">
            <div class="slds-grid slds-gutters">
                <div class="slds-col slds-size_1-of-2">
                    <lightning-output-field field-name="Name"></lightning-output-field>
                    <lightning-output-field field-name="Title"></lightning-output-field>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <lightning-output-field field-name="Phone"></lightning-output-field>
                    <lightning-output-field field-name="Email"></lightning-output-field>
                </div>
            </div>
        </lightning-record-view-form>
    </lightning-card>
</template>

import { LightningElement, api } from 'lwc';

export default class ContactViewForm extends LightningElement {
    @api recordId;
}

Contoh ini menggunakan lightning-record-view-form untuk menampilkan detail kontak dalam tata letak dua kolom. Ini memberikan kontrol lebih besar atas tampilan dibandingkan dengan lightning-record-form.

lightning-record-edit-form

<template>
    <lightning-card title="Edit Contact">
        <lightning-record-edit-form
            record-id={recordId}
            object-api-name="Contact"
            onsuccess={handleSuccess}>
            <lightning-messages></lightning-messages>
            <div class="slds-grid slds-gutters">
                <div class="slds-col slds-size_1-of-2">
                    <lightning-input-field 
                      field-name="FirstName"></lightning-input-field>
                    <lightning-input-field 
                      field-name="LastName"></lightning-input-field>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <lightning-input-field 
                      field-name="Email"></lightning-input-field>
                    <lightning-input-field 
                      field-name="Phone"></lightning-input-field>
                </div>
            </div>
            <div class="slds-m-top_medium">
                <lightning-button 
                  variant="brand" type="submit" 
                    name="save" label="Save"></lightning-button>
            </div>
        </lightning-record-edit-form>
    </lightning-card>
</template>

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ContactEditForm extends LightningElement {
    @api recordId;

    handleSuccess(event) {
        const evt = new ShowToastEvent({
            title: 'Contact updated',
            message: 'The contact record has been successfully updated',
            variant: 'success',
        });
        this.dispatchEvent(evt);
    }
}

Contoh ini menggunakan lightning-record-edit-form untuk membuat formulir pengeditan kontak yang dapat disesuaikan. Ini memberikan kontrol lebih besar atas tata letak dan perilaku formulir, termasuk penambahan tombol penyimpanan kustom.

Setiap contoh ini menunjukkan kekuatan dan fleksibilitas dari masing-masing komponen. lightning-record-form adalah yang paling sederhana untuk digunakan, lightning-record-view-form memberikan kontrol lebih besar untuk tampilan, dan lightning-record-edit-form memberikan fleksibilitas tertinggi untuk formulir pengeditan.

Edit Form dengan Custom Validator & Toast

<template>
  <lightning-card title="Custom validation in lightning record edit form">
    <lightning-record-edit-form
      object-api-name={objectName}
      onsubmit={handleSubmit}
      onsuccess={successHandler}
      onerror={handleError}
    >
      <lightning-input
        label="Name"
        value={inputValue}
        onkeyup={handleChange}
        class="slds-m-bottom_x-small"
      ></lightning-input>
      <lightning-button
        class="slds-m-top_small"
        type="submit"
        label="Create Account"
      ></lightning-button>
    </lightning-record-edit-form>
  </lightning-card>
</template>

import { LightningElement } from 'lwc';
import ACCOUNT_OBJECT from '@salesforce/schema/Account'
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class RecordEditCustom extends LightningElement {
  objectName = ACCOUNT_OBJECT
  inputValue = ''

  handleChange(event) {
    this.inputValue = event.target.value
  }

  handleSubmit(event) {
    event.preventDefault()
    const inputCmp = this.template.querySelector('lightning-input')
    const value = inputCmp.value
    // value harus berisi kata 'Australia'
    if (!value.includes('Australia')) {
      inputCmp.setCustomValidity("The account name must include 'Australia'")
    } else {
      inputCmp.setCustomValidity("")
      const fields = event.detail.fields
      fields.Name = value
      // submit the form
      this.template.querySelector('lightning-record-edit-form').submit(fields)
    }
    inputCmp.reportValidity()
  }

  successHandler(event) {
    const toastEvent = new ShowToastEvent({
      title: "Account created",
      message: "Record ID: " + event.detail.id,
      variant: "success"
    })
    this.dispatchEvent(toastEvent)
  }

  handleError(event) {
    const toastEvent = new ShowToastEvent({
      title: "Error creating Account",
      message: event.detail.message,
      variant: "error"
    })
    this.dispatchEvent(toastEvent)
  }
}