Protect Unsaved Changes in Embedded MFE Widgets (Developer Preview)

Prevent accidental data loss when users navigate away from a page with unsaved widget changes. The platform prompts users to confirm before discarding their work.

Where: This change applies to Lightning Experience in all editions.

Note The Dev Channel provides access to features that are not generally available and have been designated as pilot, beta, limited release, or developer preview. Their use is at the Customer's sole discretion and is subject to the Beta Services Terms at Agreements - Salesforce.com.

How: In the widget, check that the bridge is connected, then dispatch a trackdirtystate event via the MFE Bridge when the user modifies data:

if (bridge.isConnected()) {
  bridge.dispatchEvent(new CustomEvent('trackdirtystate', {
    detail: { isDirty: true, instanceId: bridge.instanceId, label: 'Product Registration' }
  }));
}

The event requires three fields:

• isDirty — true when the widget has unsaved changes, false after save or reset.
• instanceId — use bridge.instanceId to identify this widget instance.
• label — (optional) a descriptive name shown in the confirmation dialog (for example, "Product Registration Form"). When setting isDirty as true and no label is provided, the dirty-state modal displays an "unsaved changes" dialog with no label.

Navigation protection covers two scenarios:

• In-app navigation (clicking Salesforce tabs, links, or navigation items): The platform shows a modal listing dirty widgets by their label. Users choose to continue (discard changes) or cancel (stay on page).
• Browser actions (refresh, close tab, back button, address bar): The browser shows its native beforeunload confirmation. This dialog text can't be customized.

When multiple MFE widgets on the same page have unsaved changes, a single modal lists all dirty widgets by label.