Save bar programmatic control

Extensions
1

I’m trying to control the save bar programmatically, however the examples doesn’t seem to work.

there doesn’t seem to be an onSave or onDiscard method when inspecting the app-bridge src.

any guidance will be appreciated.

2

furthermore, programmatically updated form values does not trigger the saveBar when using data-save-bar in the form element

3

give this an try if you are on the latest app bridge and Polaris web component stuff.

shopify.saveBar.hide("save_bar");
shopify.saveBar.show("save_bar");

<ui-save-bar id="save_bar">
  <button variant="primary" onClick={handleSave} />
  <button onClick={handleDiscard} />
</ui-save-bar>
5

thank you this works.

i was also able to programmatically trigger the save bar generated using data-save-bar using the following code

const eDataStr = document.getElementById('mytextboxid');
const event = new Event('change', { bubbles: true });

however, with the data-save-bar, when you click save, the bar just closes, there’s no loading animation like the rest of the Shopify admin pages.

6

you can use the loading attribute on button to show the loader.

<button loading={showSaveLoader ? "true" : undefined} />
1 Like