The ui-save-bar documentation has gone

App Bridge
,
1

The documentation page here: Save Bar links to the ui-save-bar page. However the “old” url: https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar just redirects back to https://shopify.dev/docs/api/app-home/apis/save-bar. Why was the page removed?

1 Like
2

Hi @alessandro.tesoro, it may have been down temporarily.
Can you check if you’re able to visit it now?

3

The issue has not gone away.

4 
https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar

is redirecting to the below it seems

https://shopify.dev/docs/api/app-home/apis/save-bar
5

Update: The reason why we’re now redirecting https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar to https://shopify.dev/docs/api/app-home/apis/save-bar is to encourage the use of the Save Bar API going forward. <ui-save-bar> is still supported, but we will be cleaning up remaining references to it to ensure the recommended approach to the save bar is followed instead.

2 Likes
6

But the documentation does not encourage the use of the Save Bar API. The whole documentation is a confusing mess.

7

If ui-save-bar is going to be deprecated, what is the best way to rewrite the “old way” to use the new pattern. I couldn’t find a way to add an ID to the data-save-bar so there is no way to programmatically show or hide the saveBar.

<ui-save-bar id="my-save-bar">
  <button variant="primary" onclick={(e) => { e.currentTarget.setAttribute('loading', true); saveChanges(e) }}>Save</button>
  <button onclick={(e) => resetChanges(e) }>Discard</button>
</ui-save-bar>

export function checkDirty() {
  let newData = $state.snapshot(blocks_state);
  let oldData = $state.snapshot(original_state);
  let check = JSON.stringify(newData) == JSON.stringify(oldData);
  if (!check) {
    app_state.isDirty = true;
    shopify?.saveBar.show("my-save-bar");
  } else {
    app_state.isDirty = false;
    shopify?.saveBar.hide("my-save-bar");
  }
  return check;
}

Thank you