ZAICOでは、Android・iOS・Rubyエンジニアを絶賛募集中です！ 詳しくは、採用ページをご覧ください。
こんにちは、ZAICO開発チームです。
zaicoでは最近、zaico for SalesforceというAppExchangeアプリケーションをリリースしまして、zaicoと連動して在庫データの確認をSalesforce上から行うことができるようになりました。
これの開発中に気づいた点について紹介します。
Lightning Web Componentsの開発を行っているのですが、これにはコンポーネントが提供されており、ありがたいことにAppExchangeアプリケーションでもSalesforce標準のUIのような作りにすることができます。
オブジェクトのレコードを作るためのコンポーネントに、lightning-record-formがあり、これを使うと少ないコードでレコード作成用のフォームを作ることが可能です。
lightning-record-form – documentation – Salesforce Lightning Component Library
しかし、lightning-record-edit-formを使ってもレコード作成用のフォームを作ることができます。（editに惑わされてはいけない）
lightning-record-edit-form – documentation – Salesforce Lightning Component Library
早速ですがサンプルコードを例示して、簡単に解説します。
CreateTestRecordForm.html
<div class="slds-modal__content slds-p-around_medium">
<lightning-record-edit-form object-api-name="TestObj__c">
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
<lightning-input-field field-name="Testa__c">
</lightning-input-field>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input-field field-name="Testb__c">
</lightning-input-field>
</div>
</div>
</lightning-record-edit-form>
<lightning-record-form
object-api-name="TestObj__c"
onsubmit={handleSubmit}
onsuccess={handleSuccess}
>
</lightning-record-form>
</div>
CreateTestRecordForm.js
export default class CreateTestRecordForm extends LightningElement {
handleSubmit(event) {
event.preventDefault();
const fields = event.detail.fields;
// 1つ目の入力値を取得
const a = this.template.querySelectorAll("lightning-input-field")[0];
fields.Testa__c = a.value;
// 2つ目の入力値を取得
const b = this.template.querySelectorAll("lightning-input-field")[1];
fields.Testb__c = b.value;
this.template.querySelector("lightning-record-form").submit(fields);
}
handleSuccess(event) {
this.showCreateDeliveryForm = false;
this.dispatchEvent(
new ShowToastEvent({
message: "保存しました！",
variant: "success"
})
);
}
}
以下は表示例です。
ポイントなのは、lightning-record-edit-formとlightning-record-form、両方を使っています。
入力部品のためにlightning-record-edit-formを使い、実際の送信ではlightning-record-formの機構を利用している、というわけです。
これによって、lightning-record-formの手軽さとlightning-record-edit-formの柔軟さの両方を享受できます。
lightning-record-formはレコード作成に特化している一方、カスタマイズができないかと思います。例えば、入力時の注意事項をpタグで載せたいとき、それができません。
lightning-record-edit-formは柔軟に対応できますが、別途各種ボタンを用意してあげる必要がります。（そこまで大きな苦労ではないですが）
キャンセルボタンと送信ボタンはそのまま配置したいけど、入力部品のところだけちょっと書き足したい・・・
そんなときにこの方法が有益かもしれません。
今回はlightning-record-edit-formを使ってみた記事でしたが、他にもいろいろ駆使してzaico for Salesforceの機能拡充に励んで参ります！