Contextual Save Bar (ui-save-bar): is a custom or secondary action like "Save as" supported?

Polaris
1

We have an editor surface in our app (a report builder) where, once the user makes a valid change, we show the contextual save bar. We would like it to offer two actions: Save, which updates the current record, and Save as, which saves the current state as a new record.

From the documentation and from testing, the ui-save-bar / contextual save bar only supports a primary Save button and a Discard button. There does not appear to be any way to add a third button or a secondary action.

The admin itself seems to do exactly this. The new analytics report editor shows a “Save as” secondary action in its save bar, but that looks like it uses internal components that are not available to apps.

A few questions:

  1. Is a custom or secondary action like “Save as” on ui-save-bar supported today, and I am just missing it?
  2. If not, is it on the roadmap?

Using on App Bridge v4 using the web components (ui-save-bar). Thanks!

2

Hey @Luke - thanks for the thorough writeup, and you’ve read it right.

The contextual save bar (ui-save-bar) only wires up two actions today: the primary Save (your <button variant="primary">) and Discard (the button with no variant). There’s no supported way to add a third button or a secondary action to it. Your read on the analytics report editor is right too - that “Save as” is built with first-party admin components that aren’t exposed to apps, so that exact functionality isn’t something you can pull in. I also couldn’t find any mention of secondary actions landing in the save bar itself on our roadmap.

I did some testing, and an option you may want to explore as an alternative is to keep the save bar for Save and Discard, and surface “Save as” as its own action inside your editor that opens a modal to name the new record. One thing worth watching: while the save bar is showing it sits over the title bar, so an action placed up there is hidden right when someone is mid-edit. Keeping “Save as” in the editor itself (a button near your heading, or an overflow menu) keeps it reachable the whole time.

Rough shape:

<!-- The two supported save bar actions -->
<ui-save-bar id="report-save-bar">
  <button variant="primary" onclick="saveReport()">Save</button>
  <button onclick="discardReport()">Discard</button>
</ui-save-bar>

<!-- "Save as" lives in your editor, not the save bar -->
<s-button onclick="shopify.modal.show('save-as-modal')">Save as…</s-button>

<s-modal id="save-as-modal" heading="Save as new report">
  <s-text-field label="New report name"></s-text-field>
  <s-button slot="primary-action" onclick="saveAsNew()">Save as new report</s-button>
  <s-button slot="secondary-actions" onclick="shopify.modal.hide('save-as-modal')">Cancel</s-button>
</s-modal>

You show the save bar with shopify.saveBar.show(‘report-save-bar’) once there’s a valid change, and your “Save as” flow creates the new record and points the editor at it.

I hope this helps and let me know if you have any other questions!

3

Thanks Wes, can you also log this as a feature request please?

4

My apologies for not addressing that in my initial response @Luke and I’ve submitted this as a feature request :slight_smile: