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).

<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
• SaveBar

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

<form
  data-save-bar
  onreset="console.log('discarding')"
>
  <label>
    Name:
    <input name="username" />
  </label>
</form>

<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>

<form
  data-save-bar
  onsubmit="console.log('submitting');"
>
  <label>
    Name:
    <input name="username" />
  </label>
</form>

<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>

<form
  data-save-bar
  data-discard-confirmation
  onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"
>
  <label>
    Name:
    <input name="username" />
  </label>
</form>

<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>