[Salesforce Developer] lightning-input과 lightning-record-form

lightning-input

• LWC에서 HTML input 태그를 만들어주는 역할을 한다.

<lightning-input type="text" label="Enter some text" onclick={handleClick} onchange={handleChange}></lightning-input>
/*
Type List
checkbox / checkbox-button / date / datetime / datetime-local 
time / email / file / password / search / tel / url / number / text (default) / toggle
*/

// submit, hidden은 lightning-input에서 제공을 하지 않음
<lightning-button type="submit" label="Submit" onclick={handleClick}></lightning-button>

// js
handleChange(event) {
    event.detail.value;
}
handleClick(event) {
    this.template.querySelector('lightning-input');
}

 

lightning-input-field

• lightning-record-edit-form에서의 구성요소로, Salesforce Object와 연동되어 값을 표시
• API field Name을 지정하려면 field-name속성을 이용해야함

<lightning-record-edit-form
    id="recordViewForm"
    record-id="003R00000000000000"
    record-type-id="012R00000000000000"
    object-api-name="Contact"
>
    <lightning-messages></lightning-messages>
    <!--Other fields here-->
    <lightning-input-field field-name="LeadSource"> </lightning-input-field>
    <lightning-input-field field-name="Level__c"> </lightning-input-field>
    <lightning-button
        id="submit"
        type="submit"
        label="Update record"
        class="slds-m-top_medium"
    >
    </lightning-button>
</lightning-record-edit-form>

 

lightning-record-form

• view mode와 edit mode 그리고 read only mode가 존재한다.
• record-id 속성이 있으면 편집, 없으면 new record 양식으로 전환
• view 모드는 각 record 필드에 edit버튼이 존재한다. (사용자가 편집할 수 있는 record를 표시)
• read only 모든 편집을 활성화하지 않고 레코드를 표시하는 mode
• lightning-record-form의 mode 속성에 mode="edit" / mode="view" / mode="readonly"를 통해 사용이 가능

<lightning-record-form
    object-api-name={objectApiName}
    record-id={recordId}
    fields={fields}
    onsubmit={handleSubmit}
>
</lightning-record-form>

// js
import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Contact.Name';

export default class RecordFormExample extends LightningElement {
    // Expose a field to make it available in the template
    fields = [NAME_FIELD];

    // Flexipage provides recordId and objectApiName
    @api recordId;
    @api objectApiName;
    
    handleSubmit(event) {
        event.preventDefault(); // stop the form from submitting
        const fields = event.detail.fields;
        fields.LastName = 'My Custom Last Name'; // modify a field
        this.template.querySelector('lightning-record-form').submit(fields);
    }
}

 

lightning-record-edit-form

• record 추가나 편집에 사용
• form의 레이아웃을 custom으로 바꿀 수 있고, 특정 데이터 또한 랜더링될 때 Custom으로 변경할 수 있다.
  • 이러한 Custom이 필요하지 않으면 lightning-record-form을 사용하면 된다.
• 필드 관련 component는 lightning-input-field를 사용해야지 edit이 가능하다.
• 읽기 전용 필드는 lightning-output-field를 사용하기도 하고, lightning-formatted-name를 사용해서 편집 불가능한 내용을 구성한다.
• 모든 필드를 read only로 사용하고자 한다면, lightning-record-form의 mode="readonly"로 사용하거나 lightning-record-view-form 사용해야 함

<template>
    <lightning-record-edit-form
        record-id="003XXXXXXXXXXXXXXX"
        object-api-name="Contact"
        onsuccess={handleSuccess} // return record Id
        onsubmit={handleSubmit}
    >
        <lightning-messages> </lightning-messages>
        <lightning-output-field field-name="AccountId">
        </lightning-output-field>
        <lightning-input-field field-name="FirstName"> </lightning-input-field>
        <lightning-input-field field-name="LastName"> </lightning-input-field>
        <lightning-input-field field-name="Email"> </lightning-input-field>
        <lightning-button
            class="slds-m-top_small"
            variant="brand"
            type="submit"
            name="update"
            label="Update"
        >
        </lightning-button>
    </lightning-record-edit-form>
</template>

// js
import { LightningElement } from 'lwc';

export default class lightningRecordEditForm extends LightningElement {
    handleSubmit(event){
       event.preventDefault();       // stop the form from submitting
       const fields = event.detail.fields;
       fields.Street = '32 Prince Street';
       this.template.querySelector('lightning-record-edit-form').submit(fields);
    }
    handleSucess(event){
       const updatedRecord = event.detail.id;
       console.log('onsuccess: ', updatedRecord);
    }

}

 

 

출처)

https://developer.salesforce.com/docs/component-library/bundle/lightning-input-field/documentation

https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation

https://developer.salesforce.com/docs/component-library/bundle/lightning-record-form/documentation

https://developer.salesforce.com/docs/component-library/bundle/lightning-input/example