Dynamically Open a Modal - Polaris App Bridge React

Solved
HunkyBill
Shopify Expert
4369 36 463

I am importing the Modal from Polaris and App Bridge React Component.

import { Context, Modal } from '@shopify/app-bridge-react';

In my function I get the App Bridge context and setup a basic Modal with options, where the src is an image.

export default function ResourceListing() {
  // appBridge is super important here!
  const appBridge = useContext(Context)

So in a callback handler that has the image I am trying to open an Modal... but the Typescript tells me I cannot. The Modal.create is not a known function. So how does one open an App Bridge Model dynamically like this?

 

const handleClick = useCallback((imageSrc) => {
    console.log("The image to popup into a modal is ", imageSrc);
    // so can we popup a modal here? 
    const modalOptions = {
      title: 'My Modal',
      message: 'Hello world!',
      src: imageSrc
    };

    const myModal = Modal.create(appBridge, modalOptions);
    myModal.dispatch(Modal.Action.OPEN);
  })

TypeError: _shopify_app_bridge_react__WEBPACK_IMPORTED_MODULE_3__.Modal.create is not a function2 resourceListing.js:122

OK.. so I switched to the Modal from '@shopify/app-bridge/actions'  which did open, and apparently the Modal worked to cover the entire screen... so that is good!

But now I cannot use the src property as only an URL is supported. So I provided the URL to the image, but the App refuses to show it as it is not whitelisted?

What is that?

I guess my main question is. I have a Resource List with 100 items, and each item has an image from the CDN. So I have 100 originalSrc URLS pointing at the CDN. When the merchant clicks on any one Thumbnail image, I just want to popup a Modal with the large image. How do I do that with this component?

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
HunkyBill
Shopify Expert
4369 36 463

A question to Shopify Polaris React team. If I embed a component Modal in a ResourceItem, with the open prop set to false, and the src set to the image I want as content, and render a list of 100 items say, what happens if I set the open prop to true? I know I could experiment with that, but my thoughts are that chaos would ensue? Would 100 Modals all try and render, or would only 1?

If I render only one Modal in the ResourceList itself (or the HOC Page or Layout), and I set the src to be a specific ResourceItem image, and then I set the open prop to true, would that do the trick? 

Ok. So I chose to use Modal in App Bridge React this time, the wrapped one from App Bridge Actions, and got the same problem. I provide the src prop to the CDN image I want to display, and BOOM, App Bridge blows out as the underlying prop is actually still just URL and therefore the CDN is not whitelisted, and therefore, Houston, we have a problem.

Was it intentional for Shopify to deny Shopify Apps to show Shopify assets to Shopify merchants as a convenience like this? What is the recommended pattern here please. !!!

uncaught exception: AppBridgeError: APP::ERROR::INVALID_OPTIONS: `unsafe_origin` thrown for path: ['url'] and value: `https://cdn.shopify.com/s/files/1/2056/9273/products/sw-1354b_02.jpg?v=1581741971` with message: Provided value is not whitelisted  

 

My BEST GUESS is this. You are forcing me to now build out a <Router> in which I dish out some relative page like /media, which would safely be rendering in the Modal component, as have that component in the /media route be smart enough to accept the image from the CDN as data, and thus render a standard HTML img element with the source provided to it. Wow. Nothing like adding another zillion LOC to show off an image. JS is so PHAT.

 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
HunkyBill
Shopify Expert
4369 36 463

This is an accepted solution.

never mind. It was simple. just passed the params in the query. OOPSIE>

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes