【Salesforce】lightning-record-edit-formを使う

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の機能拡充に励んで参ります!

ZAICOでは、新しいテクノロジーの力でモノの状態・流れを把握する仕組みに一緒に取り組む仲間を募集しております。
詳しくは、採用ページをご覧ください。

好きな場所で働こう