Guidance Requested for BFS point Prompt users to save before exiting modals

Built for Shopify
1

Hello Shopify Team,

Milind here from the Product Team at Flits.

We appreciate Shopify’s unwavering commitment to upholding the highest app quality standards through the Built for Shopify program.

Recently we submitted our application for the Built for Shopify program and got multiple improvement points which are excellent suggestions from the team and we will improve those points for sure.

Below is one point that is confusing as Shopify suggests prompting the user for unsaved changes in the full-screen modal/popup. However, our application does not have a fullscreen modal/popup.

If there are unsaved changes, prompt merchants to save before exiting the modal. The app must prompt a Merchant to save before exiting. Please refer to our App Design Guidelines and see this screenshot for additional details. Ensure to update this throughout the entire app.

We have reviewed multiple documents and Slack channels for this point. Every place mentioned in the community as well as App guidelines for modals is about prompting the user before exiting the fullscreen modal.
Check the following links => Built for Shopify requirements 4.6.3 prompt users to save before exiting modal from full screen

As per the screencast shared shopify shows customer’s information edit and when user have unsaved changes and tried to close the modal it shakes the buttons and shows the unsaved changes information in the modal footer.

We have tried to implement such functionality with following approaches.

  • App-Bridge modal
    In the Appbridge modal, there is no direct functionality to implement such a thing in their latest version.

  • Polaris deprecated modal component
    In the Polaris modal component, it is achievable with a few tricky solutions but in this case, we can prevent only in application’s iframe event. It is not feasible to listen to click events and prevent them in other areas outside the application’s iframe.

Does any other application face a similar issue?
How we can approach the solution to this issue?
Is there any way to communicate with the reviewer?
Any guidance from the Shopify team and other partners will be helpful.

Have a productive day :slightly_smiling_face:

2

@Liam-Shopify Any suggestions on this?

3

@Liam-Shopify I have the same question as @Milind_Patel
We could implement this feature ourselves if we had onClose event on Modal component as it was on app-bridge v3. Of course it would be best if this component had prop, that can turn on confirmation message and disabled Modal close event.

4

Hi @Milind_Patel @Gatis_G. Unfortunately App Bridge does not currently support contextual save bar usage within a normal (i.e. non max) modal. Adding support for this functionality is on the team’s radar. In the meantime, the BFS review team has been informed that they should not fail apps based 4.12.3 for not using the contextual save bar for normal (i.e. non max) modals. However, apps are still required to use the contextual save bar within max modals.

2 Likes