【Salesforce LightningComponent作成】recordEditFormが思ったより使いづらかった話

LightningComponent 作成つらかった

Salesforceさん…もうちょっとDocumentほしいです…
めっちゃ大変でした…
ここでは recordEditForm の話を備忘録的に置いておきます。

便利な recordEditForm

recordEditFormはrecordIdを指定すると、クエリ不要で値を取得してくれて便利です。

(※下記のコードのファイル名、本当はtest.cmpだけど、色が白で見にくいので.htmlを後ろにつけました。他に回避策あったら教えてください。)
追記
言語:名前 （ex.html:test.cmp）で回避できるそうです！ありがとうございます！

test.cmp

<!-- Accountの項目 -->
<lightning:recordEditForm aura:id="recordEditForm" recordId="{!v.recordId}" objectApiName="Account">
    <lightning:inputField fieldName="test__c" />
</lightning:recordEditForm>
<!-- 保存ボタン -->
<lightning:button type="button" onclick="{!c.updateAccount}"/>

inputfield の fieldName で test__c を指定したことにより、recordId の test__c の値を取ってきてくれています。
保存も簡単です。コントローラーでaura:idを指定してsubmitするだけです。

testController.js

updateAccount : function(component) {
    component.find("recordEditForm").submit(); //これだけで保存してくれる
}

aura:id が recordEditForm であるところを探し、そのタグ内の項目を submit して保存してくれます。

便利ですね。特にクエリ書かなくても良いところが凄いと思います。
と思いきや。

不便な recordEditForm

まず結論から言うと、recordIdでIdを指定しているので、複数のレコードを編集したいときや、親オブジェクトなどの他のオブジェクトと同時に編集したいときには使用できなさそうでした

以下のようなコンポーネントを作成したとします。

test.cmp

<!-- Accoutの項目 -->
<lightning:recordEditForm aura:id="recordEditForm" recordId="{!v.acc.Id}" objectApiName="Account">
    <lightning:inputField fieldName="test__c" />
</lightning:recordEditForm>
<!-- Opportunityの項目 -->
<lightning:recordEditForm aura:id="recordEditForm2" recordId="{!v.opp.Id}" objectApiName="Opportunity">
    <lightning:inputField fieldName="test2__c" />
</lightning:recordEditForm>
<!-- 保存ボタン -->
<lightning:button type="button" onclick="{!c.updateAccOpp}"/>

上記のを1つの保存ボタンで同時に保存したい場合は以下のように submit を2回使用する js となります。

testController.js

updateAccOpp : function(component) {
    component.find("recordEditForm").submit();
    component.find("recordEditForm2").submit();
}

この submit を2回するのがダメなのですが、なぜだか分かりますか？

submit を2回してはいけない理由

Accountの項目にエラーがあり、Opportunityの項目にエラーがあるときに良くない動作をしてしまいます。
以下の表を用意しました。

Account	Opportunity	問題
エラーなし	エラーなし	問題なし
エラーあり	エラーなし	問題なし
エラーなし	エラーあり	Accountだけ更新されてしまう
エラーあり	エラーあり	エラー有無の確認がAccountのみ

上記のように2つ目のsubmitでエラーがあったとしても、1つ目のsubmitが通ってしまうという現象が起こってしまうのです。

回避策

recordEditForm を使わずにヘルパーからApexを呼んで Database.setSavepoint を使ってエラーの時はロールバックしました。
必須項目と入力規則のエラーを同時に出せるのも個人的にはGood。
もっと良い回避策ありそうですね。知っている方がいらっしゃったら教えてください。

まとめ

recordEditForm は編集するレコードが1つだけのときに便利。
しかし、それはわざわざコーディングする必要あるのだろうか……標準でやりなさいな、となりますよね。
考えられるのは、親オブジェクトは項目だけ表示して、子オブジェクトのみを編集するときとか？

Lightning Componentについて

社内で「Lightning Web Componentが出るため、もう使われなくなるのでは」という噂が聞こえてきました。
ああ、学習コスト……