lightning-record-form を使ってみた

Aura コンポーネントでもおなじみ、標準に近いレコード詳細表示や編集画面を簡単に作成出来る Record Form　の LWC 版を使ってみました。とりあえず表示のパターンだけの確認になります。

##モードの選択
モード属性の指定によってフォームの見え方や出来ることが変わります。

• mode には view, edit, readonly がある
• mode を指定しなかった場合はデフォルトで view になる
• view mode ではインライン編集が有効になるが readonly ではならない
• edit mode では Save と Cancel ボタンが表示され、押すとview mode になる

recordForm.html

    <lightning-record-form record-id={recordId} object-api-name={objectApiName} layout-type="Compact">
    </lightning-record-form>
    
    <lightning-record-form record-id={recordId} object-api-name={objectApiName} layout-type="Compact" mode="view">
    </lightning-record-form>
    
    <lightning-record-form record-id={recordId} object-api-name={objectApiName} layout-type="Compact" mode="edit">
    </lightning-record-form>
    
    <lightning-record-form record-id={recordId} object-api-name={objectApiName} layout-type="Compact" mode="readonly">
    </lightning-record-form>

##レイアウトタイプと表示項目の指定
表示したい項目の指定には、レイアウトタイプや項目を直接指定します。
例えば、姓、名、メールアドレスだけを指定すると以下の様に表示されます。

• layout-type には Full, Compact がある
• layout-type の他に fields を指定することも出来るが @api されたリスト型の変数を指定する必要がある
• layout-type と fields の両方を指定した場合、fields の項目の後に layout-type の項目が表示される

recordForm.html

    <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields}>
    </lightning-record-form>
    
    <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields} mode="view">
    </lightning-record-form>
    
    <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields} mode="edit">
    </lightning-record-form>
    
    <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields} mode="readonly">
    </lightning-record-form>

##レコード作成
レコード ID を指定しないとエラーになりませんがレコードの取得が行われません。
通常新規レコード作成を行う場合はレコードIDを指定しません。

• レコード ID を指定しない場合は、基本的には edit モードを指定する
• layout-type が必ず Full になるので注意する

recordForm.html

    <lightning-record-form object-api-name={objectApiName} layout-type="Full" mode="edit">
    </lightning-record-form>

その他のファイル

recordForm,js

import { LightningElement, api } from 'lwc';
export default class RecordForm extends LightningElement {
    @api recordId;
    @api objectApiName;
    @api fields;

    connectedCallback() {
        this.fields = this.fields ? this.fields.split(',') : [];
    }
}

recordForm.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myTemplate">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Sample Record Form</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects>
            <property type="String" name="fields" label="Fields" default="LastName,FirstName,Email"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>