はじめに

Salesforceのレコード詳細画面のインライン編集などで、保存せずにタブを切り替えようとすると、下記のようなダイアログが表示されます。標準のコンポーネントだけでなく、自作のコンポーネントでも同様のダイアログを表示させることが可能です。

この記事ではLightningコンポーネントで未保存警告ダイアログを出す方法について紹介します。Auraのlightning:unsavedChangesを活用します。

*LWCでは使用できません（idea）。Auraでラップする必要があります。

実装手順

SalesforceのレコードページにカスタムAuraコンポーネントを埋め込み、ユーザーが送信ボタンを押さずに別のSalesforceタブへ移動しようとした際に警告を表示する方法を紹介します。これを実現するために lightning:unsavedChanges を活用します。

HTML

unsavedChangesは下記のように使用します。JavaScriptでメソッドを使用するので、aura:idを設定しておきます。onsave属性にダイアログの「保存」をクリックした時に実行する処理を設定します。ondiscard属性には「変更を破棄」をクリックした時に実行する処理を設定します。

<lightning:unsavedChanges aura:id="unsaved" onsave="{!c.handleSave}" ondiscard="{!c.handleDiscard}" />

例

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
  <aura:attribute name="inputValue" type="String" default="" />

  <!-- 未保存の変更を検知するコンポーネント -->
  <lightning:unsavedChanges aura:id="unsaved" onsave="{!c.handleSave}" ondiscard="{!c.handleDiscard}" />

  <!-- 入力フィールド -->
  <lightning:input label="項目1" value="{!v.inputValue}" onchange="{!c.handleChange}" />

  <!-- ボタン -->
  <lightning:button label="送信" onclick="{!c.handleSave}" variant="brand" />
</aura:component>

JavaScript

setUnsavedChangesメソッドで離脱時に警告を出す状態と出さない状態を切り替えることができます。また、labelを設定することでダイアログに表示するタイトルの一部を変更することができます。

component.find("unsaved").setUnsavedChanges(true);
component.find("unsaved").setUnsavedChanges(true, { label: '検証用' });
component.find("unsaved").setUnsavedChanges(false);

例

({
    handleChange: function(component, event, helper) {
        component.find("unsaved").setUnsavedChanges(true);
    },

    handleSave: function(component, event, helper) {
        component.find("unsaved").setUnsavedChanges(false);
        // 処理
    },

    handleDiscard: function(component, event, helper) {
        component.find("unsaved").setUnsavedChanges(false);
        // 処理
    }
})

参考

lightning:unsavedChanges