Lightning Web Component から Apex メソッドを呼び出してレコード更新する、というコンポーネントを作成した際、更新結果が画面に反映されないという事態に直面しました。
その解決法を残しておきます。
失敗例
取引先名を更新するコンポーネントを作成します。
更新処理は Apex メソッドを呼び出して行います。
<template>
<lightning-quick-action-panel>
<div class="slds-align_absolute-center">
<div class="slds-text-heading_medium slds-p-around_medium">
<p>取引先名を「東パンダ株式会社」に変えても良いですか?</p>
</div>
</div>
<div slot="footer">
<lightning-button variant="brand" label="はい" class="slds-m-left_x-small" onclick={handleUpdate}></lightning-button>
</div>
</lightning-quick-action-panel>
</template>
import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import updateAcc from '@salesforce/apex/UpdateAccount.updateAcc';
export default class Sample extends NavigationMixin(LightningElement) {
@api recordId;
handleUpdate(){
updateAcc({accId: this.recordId})
.then(() => {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recordId,
actionName: 'view'
}
}, true);
})
}
}
public with sharing class UpdateAccount {
@AuraEnabled
public static void updateAcc(Id accId){
try {
Account acc = [SELECT Id FROM Account WHERE Id = :accId];
acc.Name = '東パンダ株式会社';
update acc;
} catch (Exception e) {
throw new AuraHandledException(e.getMessage());
}
}
}
取引先レコードページからこのコンポーネントを開き更新を実行すると、取引先レコードページに自動でリダイレクトします。
しかし、画面上は取引先名が更新されていません。
これはレコードの更新に失敗しているのではなく、データベースの変更が画面に反映されていないだけです。
データベースの変更を LWC に通知してあげる必要があります。
改善後
notifyRecordUpdateAvailable() を使用して、レコードの変更を通知してあげます。
import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { notifyRecordUpdateAvailable } from 'lightning/uiRecordApi';
import updateAcc from '@salesforce/apex/UpdateAccount.updateAcc';
export default class Sample extends NavigationMixin(LightningElement) {
@api recordId;
handleUpdate(){
updateAcc({accId: this.recordId})
.then(() => {
// レコードの変更をデータサービスに通知してからレコードページに戻ることで、ページ上も値が更新される
notifyRecordUpdateAvailable([{recordId: this.recordId}])
.then(() => {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recordId,
actionName: 'view'
}
}, true);
});
})
}
}
レコードの変更が画面に反映されるようになりました。
コメント