Contextual Save Bar

The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work.

Setup

Create an app and import the ContextualSaveBar module from @shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.

import createApp from '@shopify/app-bridge';
import { ContextualSaveBar } from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});

Create and show

Generate a contextual save bar and make it visible:

const options = {
  saveAction: {
    disabled: false,
    loading: false,
  },
  discardAction: {
    disabled: false,
    loading: false,
    discardConfirmationModal: true,
  },
};
const contextualSaveBar = ContextualSaveBar.create(app, options);

contextualSaveBar.dispatch(ContextualSaveBar.Action.SHOW);

Update options

You can modify the options at any time. If the contextual save bar is visible, the UI will be updated immediately.

contextualSaveBar.set({ discardAction: { discardConfirmation: false } });

Hide

Dispatch a hide action when you want to hide the contextual save bar.

contextualSaveBar.dispatch(ContextualSaveBar.Action.HIDE);

Subscribe to the contextual save bar actions (ContextualSaveBar.Action.DISCARD and ContextualSaveBar.Action.DISCARD) by calling subscribe. The subscribe method returns a method that you can call to unsubscribe from the action.

To hide the contextual save bar, dispatch a ContextualSaveBar.Action.HIDE action in the subscribe callback.

const discardUnsubscribe = contextualSaveBar.subscribe(
  ContextualSaveBar.Action.DISCARD,
  function() {
    // Hide the contextual save bar
    contextualSaveBar.dispatch(ContextualSaveBar.Action.HIDE);
    // Do something with the discard action
  }
);

const saveUnsubscribe = contextualSaveBar.subscribe(
  ContextualSaveBar.Action.SAVE,
  function() {
    // Optionally, show a loading spinner while the save action is in progress
    contextualSaveBar.set({saveAction: {loading: true}});
    await doSaveAction();

    // Hide the contextual save bar
    contextualSaveBar.dispatch(ContextualSaveBar.Action.HIDE);
  }
);

// Unsubscribe
discardUnsubscribe();
saveUnsubscribe();

Unsubscribe

You call unsubscribe to remove all current subscriptions on the contextual save bar:

contextualSaveBar.subscribe(ContextualSaveBar.Action.DISCARD, function() {
  // Do something with the discard action
  // Hide the contextual save bar
  contextualSaveBar.dispatch(ContextualSaveBar.Action.HIDE);
});

contextualSaveBar.subscribe(ContextualSaveBar.Action.SAVE, function() {
  // Do something with the save action
  // Hide the contextual save bar
  contextualSaveBar.dispatch(ContextualSaveBar.Action.HIDE);
});

// Unsubscribe
contextualSaveBar.unsubscribe();