lightning-record-form を使ってみた

Aura コンポーネントでもおなじみ、標準に近いレコード詳細表示や編集画面を簡単に作成出来る [Record Form](https://developer.salesforce.com/docs/component-library/bundle/lightning-record-form/documentation)　の LWC 版を使ってみました。とりあえず表示のパターンだけの確認になります。

##モードの選択
モード属性の指定によってフォームの見え方や出来ることが変わります。
<img width="1554" alt="Screen_Shot_2019-02-14_at_22_57_32.png" src="https://qiita-image-store.s3.amazonaws.com/0/26378/88666460-99c8-519a-49e4-10c2643c1e1e.png">

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

```html: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>
```

##レイアウトタイプと表示項目の指定
表示したい項目の指定には、レイアウトタイプや項目を直接指定します。
例えば、姓、名、メールアドレスだけを指定すると以下の様に表示されます。
<img width="1555" alt="Screen Shot 2019-02-14 at 22.57.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/26378/e502724d-d206-ab97-32ac-573b650940b3.png">

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

```html: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を指定しません。

<img width="384" alt="Screen_Shot_2019-02-14_at_22_59_37.png" src="https://qiita-image-store.s3.amazonaws.com/0/26378/0bdfb75c-3a4c-005b-3c40-ff1bc34374ed.png">

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

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



## その他のファイル

```js: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(',') : [];
    }
}
```

```xml: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>
```