Apex コンポーネントライブラリの lightning-record-formの使い方のサンプル

2024年4月27日

環境
Apex Salesforce

使用例
record-id で指定するIdは15桁です.

<lightning-record-form
    object-api-name="Product2"
    record-id="01xxxxxxxxxxxxxx"
    fields={fields}>
</lightning-record-form>

fields は配列で渡します

import { LightningElement } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Product2.Name';
import PRODUCTCODE_FIELD from '@salesforce/schema/Product2.ProductCode';
import DESCRIPTION_FIELD from '@salesforce/schema/Product2.Description';


export default class Recordform extends LightningElement {
fields = [NAME_FIELD, PRODUCTCODE_FIELD, DESCRIPTION_FIELD];
}

lightning-record-form のattributeを設定します
columnsでカラム数を指定します。

<lightning-record-form
    object-api-name="Product2"
    record-id="01xxxxxxxxxxxxx"
    fields={fields}
    columns="2">
</lightning-record-form>

フィールドとラベルを変更します

<div>
compact:
<lightning-record-form
    object-api-name="Product2"
    record-id="01t0xxxxxxxxxxx"
    fields={fields}
    density="compact">
</lightning-record-form>
</div>
<div>
comfy:
<lightning-record-form
    object-api-name="Product2"
    record-id="01t0xxxxxxxxxxx"
    fields={fields}
    density="comfy">
</lightning-record-form>
</div>
<div>
auto:
<lightning-record-form
    object-api-name="Product2"
    record-id="01t0xxxxxxxxxxx"
    fields={fields}
    density="auto">
</lightning-record-form>
</div>