onBeforeUnload
Registers a beforeunload event handler for a dashboard page.
onBeforeUnload() accepts a callback that's triggered when a site builder is about to navigate away from a dashboard page or when the browsing context of an app is being unloaded. This can happen when the site builder selects another page from the dashboard's sidebar.
The event object passed to the callback function contains a function called preventDefault(). If the callback calls preventDefault(), navigation away from the page is paused. A dialog is displayed in the dashboard warning the site builder that there may be unsaved data on the page. The site builder can choose to stay on the current page and save their data, or to proceed.
Note: You should not assume that the beforeunload event will always fire or that the confirmation dialog will always be presented. These behaviors vary depending on the site builder's browser.
Signature
1(callback: (event: Event) => void) => { remove: () => void; };
Parameters
| Name | Type | Description |
|---|---|---|
callback | Function | Callback function to call when the beforeunload event fires. The function receives an event object as an argument. |
Event object
The event object passed to the callback function.
| Name | Type | Description |
|---|---|---|
preventDefault | Function | Prevents the page from unloading. Opens a dialog with a warning that there may be unsaved data on the page. |
Returns
1{ remove: () => void; }
An object containing a function called remove(). Calling this function removes the onBeforeUnload event handler.
Examples
To set up a dashboard client, refer to the setup guide.
Prompt for confirmation before unloading unsaved data
1const { remove } = client.dashboard.onBeforeUnload((event) => {2 // Check if there's unsaved data on the page3 if (unsavedPageData) {4 event.preventDefault();5 }6});