Salesforce LWC <lightning-record-form> 태그

1. html

<template>

    <lightning-card>

        <lightning-record-form

            object-api-name={objectApiName}

            fields={fields}

            onsuccess={handleSuccess}>

        </lightning-record-form>

    </lightning-card>

</template>

 

2. js 

import { LightningElement } from 'lwc';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import Contact_Object from '@salesforce/schema/Contact';

import FIRST_NAME from '@salesforce/schema/Contact.FirstName';

import LAST_NAME from '@salesforce/schema/Contact.LastName';

import EMAIL from '@salesforce/schema/Contact.Email';

export default class ContactCreator extends LightningElement {

    objectApiName = Contact_Object;

    fields = [FIRST_NAME , LAST_NAME , EMAIL];

    handleSuccess(event){

        this.dispatchEvent(new ShowToastEvent({

            title : "Contact created",

            message : "Contact ID " + event.detail.id,

            variant : "success"

        }));

    }

}

 

3. 결과

 

  - <lightning-record-form> 태그는 데이터 서비스 사용 , 캐시 및 동기화기능 , 보안의 이점이 있다.
  - 해당 태그에 object-api-name   fields  onsuccess 를 사용한다
  - js에서는 오브젝트와 필드를 import로 가져온다 ( import EMAIL from '@salesforce/schema/Contact.Email'; 의 형태)
  - html의 태그에서 사용한 태그옵션들의 변수를 바인딩해주고 onsuccess에서 발생하는 이벤트를 설정해준다
  - 보통 this.dispatchEvent로 ShowToastEvent를 날린다.|
  - mode 옵션은 (view,edit,readonly)가 있고 , 기본은 edit이다
  - edit은 추가 및 업데이트가 가능하다.
  - view는 보기 및 편집아이콘이 있어 편집이 가능하고 readonly는 보기만 가능하다.
  - record-id를 사용하면 레코드에 해당 lwc를 넣었을때 id값을 가져와 레코드를 불러온다