【Salesforce】lightning-record-edit-formを使う | ほっこりZAICOエンジニアブログ【クラウド在庫管理システム(アプリ)zaico 】

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"
      })
    );
  }
}

以下は表示例です。