How to implement Contextual Save Bar inside s-app-window (App Bridge Web Component)

App Bridge
1

Hi everyone :waving_hand:

I’m using Shopify App Bridge Web Components and I’ve implemented a full-screen form using the s-app-window component.

I want to show the Contextual Save Bar (same as how data-save-bar works inside ui-modal with form data) when there are unsaved changes in my form — but since I’m using s-app-window, it’s not clear how to make the Save Bar appear or behave the same way.

3

@Steven_Gong
Yes, could you please share the code and also explain how I can handle closing the s-app-window when the form is dirty?

I’m using app-bridge-react version 4.1.6, which doesn’t require installing the app-bridge package. Instead, it uses the App Bridge CDN URL.

I’m also using Polaris Web Components, which are loaded via the Polaris CDN URL.

The app-window stopped working on both dev and production
6

@jaymit_b facing same issue
have you found any way?

7

This is indeed a big limitation as the use case for app window is to embed an editor like experience. ping @Alan_G

9

Hi Folks :waving_hand: just confirming that this is expected behaviour for the CSB not to function in the same way as a data-save-bar works inside a ui-modal, but we do know this is something that is very highly requested and implementing it is on our radar. I can’t confirm exactly when or what the implementation would look like, but it’s something we’re aware of. I did pass on your feedback to some folks internally as well though, since it’s always good to have diverse use cases to advocate for features.

Thanks again for flagging this, let me know if I can clarify anything on my end here.