ZAICOでは、Android・iOS・Rubyエンジニアを絶賛募集中です！ 詳しくは、採用ページをご覧ください。
こんにちは、ZAICO開発チームです。例の感染症の流行がようやく落ち着いてきたかなと思いきや、急に寒くなってきて外に出るのをためらう、そんな毎日です。
先日、FedEx-WEEKがんばるぞ、なんて思っていたのですがワクチン接種と重なってしまい、あいにく週の半分ほどダウンしてしまいました。
筆者はZAICO for Salesforceの開発を担当しており、その中で得られた知見をまとめようと思います。
Lightning Web Components（以下、LWCという）の開発を行っているのですが、筆者はよく、レコードページに置くコンポーネントを実装することが多いです。
突然ですが、LWCのlightning-record-formで参照関係の項目があるときに、UI上の選択ではなく入力せずに自動的に補完するにはどうすると良いでしょうか。
例えば、以下のようなオブジェクトがあるとします。
レコードで示すとこのような感じです。一対多のような関係です。
そこで、AのレコードページでBのレコードを複数作れるようなコンポーネントを用意するとします。（関連リストを使いたいところですが、訳あってしたいこともあると思います）
TestForm.html
<template>
<section class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<div class="slds-modal__content slds-p-around_medium">
<lightning-record-edit-form object-api-name="B">
<div class="slds-grid">
<lightning-input-field field-name="Name">
</lightning-input-field>
</div>
</lightning-record-edit-form>
<lightning-record-form
object-api-name="B"
onsubmit={handleSubmit}>
</lightning-record-form>
</div>
</div>
</section>
</template>
TestForm.js
import { LightningElement, api } from "lwc";
export default class CreateDeliveryForm extends LightningElement {
// 開いているレコードページのレコードID
@api recordId;
handleSubmit(event) {
event.preventDefault();
const fields = event.detail.fields;
// A（参照関係）は開いているレコードとする
fields.A = this.recordId;
// 入力されているNameを取得
const n = this.template.querySelectorAll("lightning-input-field")[0];
// Nameに代入
fields.Name = n.value;
// レコードを作る
this.template.querySelector("lightning-record-form").submit(fields);
}
}
lightning-record-edit-formとlightning-record-formを組み合わせて使っているのはちょっと裏技的なんですが、これについてはこちらの記事をご参照ください。
ポイントとなるのは、lightning-record-formにおける参照関係の項目でどのように取り扱うか、それはレコードIDを代入してあげると良いということです。
単純なことかもしれませんが、「これで良い感じに動くんだ！」というのが率直な感想でした。
以上、lightning-record-formにまつわる小技でした。