Polaris-react: Documentation on how to access the Modal/App from one other

[cargix1]

Issue summary

When using the EASDK outside of Polaris we're able to access a modals content from the main app, and vise-versa as documented here https://help.shopify.com/api/sdks/shopify-apps/embedded-app-sdk/features#modal-and-application-communication. There doesn't appear to be any documentation for handling this using Polaris.

Expected behavior

To give you some context i'm trying to create a modal which will allow merchants to upload a CSV of their pickup and delivery outlets. I'm wanting to create something similar to the native product CSV upload modal in Shopify itself.

Notice how the Upload file button is disabled until a merchant selects a file to upload.

Actual behavior

At the moment there appears to be no way of communicating between the modal and app. So we can't achieve things like dynamically enabling/disabling the primaryAction on the modal.

Specifications

• Polaris version: 1.1.1
• React version: 15.4.2
• Browser: Chrome
• Device: Macbook Pro
• Operating System: Sierra

[alekseyg]

I'm trying to figure out how to have the two communicate myself right now, and can't find any documentation whatsoever. It seems that for now, the modal can be used to show a message and nothing else. How is that different from an alert?

[alekseyg]

After digging through Shopify's older Embedded App SDK, I found the code that allows the iframes to communicate amongst each other. That's what I'm using for now, though it'd be nice to have someone from the Shopify team confirm whether or not there's a danger in Shopify changing how the iframes are named currently and breaking this behavior. I simply use postMessage between the iframes, which I get from the parent window, like so:

window.parent.frames["app-modal-iframe"].postMessage(...)
window.parent.frames["app-iframe"].postMessage(...)

Again, this is taken from the code in https://cdn.shopify.com/s/assets/external/app.js which gives us the following methods, respectively:

ShopifyApp.Modal.window()
ShopifyApp.window()

[cargix1]

Thanks so much @alekseyg that was a great help!

[alekseyg]

You're welcome, @cargix1, though I still think that Shopify need to make an official solution, or at least chime in on whether my reverse-engineered solution is going to be reliable in the future.

[mattchidley]

@cargix1 another solution to consider could be to not use the modal actions at all, and instead render a page with action buttons inside the body of the modal. We are building a CSV upload modal just like you, and this is our approach.

I do agree with @alekseyg though - we need an official solution.

*edit, you can then have a bit cleaner access to closing the modal from the page actions inside the body by calling window.ShopifyApp.Modal.close().