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: