# Save Bar The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be used in 2 ways: 1. It is automatically configured when you provide the <code>data-save-bar</code> attribute to a [<code>form</code> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) and will display the save bar when there are unsaved changes. The [<code>submit</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) event fires when the form is submitted or when the Save button is pressed. The [<code>reset</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) event fires when the form is reset or when the Discard button is pressed, which discards all unsaved changes in the form. 2. It can be controlled declaratively through the `ui-save-bar` element. For more information, refer to the [`ui-save-bar` component](/docs/api/app-bridge-library/web-components/ui-save-bar). ### Save Bar ```html <form data-save-bar onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();" > <label> Name: <input name="username" /> </label> </form> ``` ## saveBar The `saveBar` API provides a `show` method to display a save bar, a `hide` method to hide a save bar, and a `toggle` method to toggle the visibility of a save bar. These are used in conjunction with the `ui-save-bar` element. They are alternatives to the `show`, `hide`, and `toggle` instance methods. ### _SaveBarApi ### hide Hides the save bar element. An alternative to the `hide` instance method on the `ui-save-bar` element. ### leaveConfirmation Show leave confirmation dialog if necessary. This promise is resolved when there is no visible save bar or user confirms to leave. ### show Shows the save bar element. An alternative to the `show` instance method on the `ui-save-bar` element. ### toggle Toggles the save bar element visibility. An alternative to the `toggle` instance method on the `ui-save-bar` element. ## Related - [ui-save-bar](/docs/api/app-bridge-library/web-components/ui-save-bar) - [SaveBar](/docs/api/app-bridge-library/react-components/savebar-component) ## Examples The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be used in 2 ways: 1. It is automatically configured when you provide the <code>data-save-bar</code> attribute to a [<code>form</code> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) and will display the save bar when there are unsaved changes. The [<code>submit</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) event fires when the form is submitted or when the Save button is pressed. The [<code>reset</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) event fires when the form is reset or when the Discard button is pressed, which discards all unsaved changes in the form. 2. It can be controlled declaratively through the `ui-save-bar` element. For more information, refer to the [`ui-save-bar` component](/docs/api/app-bridge-library/web-components/ui-save-bar). ### Save bar configured through the data-save-bar attribute ### Subscribe to Discard ```html <form data-save-bar onreset="console.log('discarding')" > <label> Name: <input name="username" /> </label> </form> ``` ```html <form data-save-bar> <label> Name: <input name="username" /> </label> </form> <script> const form = document.querySelector('form'); form.addEventListener('reset', (e) => { console.log('discarding'); }); </script> ``` ### Subscribe to Save ```html <form data-save-bar onsubmit="console.log('submitting');" > <label> Name: <input name="username" /> </label> </form> ``` ```html <form data-save-bar> <label> Name: <input name="username" /> </label> </form> <script> const form = document.querySelector('form'); form.addEventListener('submit', (e) => { console.log('submitting'); }); </script> ``` ### Showing a discard confirmation modal ```html <form data-save-bar data-discard-confirmation onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();" > <label> Name: <input name="username" /> </label> </form> ``` ### Showing the save bar with the saveBar API ```html <ui-save-bar id="my-save-bar"></ui-save-bar> <button onclick="shopify.saveBar.show('my-save-bar')">Show</button> <button onclick="shopify.saveBar.hide('my-save-bar')">Hide</button> ```