Gadget Developers•8mo ago

Building a custom configuration page for a Flow Action

Any guidance on wiring this up to Gadget's app bridge? It's been a little while since I was last messing around with the app bridge, but last I recall it was a bit of a nightmare. Is this version of the app bridge referenced in Flow's docs compatible with the gadget app bridge? https://shopify.dev/docs/apps/build/flow/actions/build-config-ui

Shopify

Build the configuration UI

Learn how to embed a page from your app in the Shopify Flow editor.

39 Replies

Chocci_Milk•8mo ago

Hello, We don't override the Shopify app bridge so anything thats possible with the Shopify app bridge should be possible in your application. You should be able to do the exact steps that they have for app bridge 4.x.x

kalenjordanOP•8mo ago

ok cool How can I get a web route to respond to a POST? That's how the flow custom configuration works - it posts to your url and expects a react response

kalenjordanOP•8mo ago

It expects a react response that uses some of the app bridge components

kalenjordanOP•8mo ago

Or another way of asking this is can I get my api route to serve a react app instead of a json response? Trying to do that here: https://flow-extensions--development.gadget.app/action https://flow-extensions.gadget.app/edit/development/files/api/routes/GET-action.jsx But it's returning json

Chocci_Milk•8mo ago

Could you simply return React as a string?

kalenjordanOP•8mo ago

I don't think that's how it works I'll check

kalenjordanOP•8mo ago

yeah that won't work - it renders it sort of like an iframe - https://community.shopify.dev/t/questions-about-building-a-custom-configuration-ui-for-a-flow-action/6006/5

Shopify Developer Community Forums

Questions about building a custom configuration UI for a Flow Action

Think of CCP like a fancy iframe. That URL should be a link in your app that displays a page/UI.

kalenjordanOP•8mo ago

@[Gadget] Kyle hey kyle just wanted to see if you might have a chance to look at this. Hven't gotten any response since yesterday and guessing this might be an out of the box situation for gadget routing

Chocci_Milk•8mo ago

Hello again, The team is responding to support requests as fast as we can and will get back to you as soon as possible

kalenjordanOP•8mo ago

@Chocci_Milk ok - perhaps a simpler question that could get a faster response. Is there a direct url to a web route? Not https://admin.shopify.com/store/kalen-test-store/apps/flow-extensions But something like... https://flow-extensions--development.gadget.app/SOMETHING_HERE I know those routes normally don't render when you go directly to them because they want to be viewed inside of the app, but maybe they'll work from the flow iframe

Chocci_Milk•8mo ago

Short answer, you should definitely be able to hit a frontend route by making a request to that route. The thing is that the usual request method for routes in the browser is GET, not POST. That's why I'm confused how this would work. I'd need to do some research in order to tell you what to do

kalenjordanOP•8mo ago

ok and getting a regular web route to respond to POST is gonna be tricky?

[Gadget] Kyle•8mo ago

this should all be very doable with Gadget just to make sure I understand you want to do the custom configuration page (which looks like needs to be a react app) or the custom configuration page preview?

Chocci_Milk•8mo ago

If POST is required, are you able to simply redirect them to an unauthenticated frontend page?

kalenjordanOP•8mo ago

@kysenProspers nice. This would be for the custom configuration page, which is the react page. It's basically the interactive section that renders when you're configuring your flow action. The preview is easier beacuse you just return JSON to them and they render that for you.

kalenjordanOP•8mo ago

@Chocci_Milk it would need to be authenticated. We're going to be pulling stuff from their account into that config page. Like for example they will have created certain link templates and we want to put them in a dropdown for them to select from in there that the flow will then use to generate a klaviyo api call with the selected link template.

Chocci_Milk•8mo ago

What will allow you make this call authenticated? Does the Flow API provide a session token that you can set on the Gadget provider?

kalenjordanOP•8mo ago

@Chocci_Milk checking on that @[Gadget] Kyle realized I tagged the wrong handle in my reply above

[Gadget] Kyle•8mo ago

hey @kalenjordan can you point one of these at the root of a gadget app i.e. https://<your-gadget-slug>--development.gadget.app/ I'm pretty sure we can just use the client side router to determine if the url requested is for the custom configuration page and then render a seperate component from the admin app

kalenjordanOP•8mo ago

@[Gadget] Kyle yeah doing that now

kalenjordanOP•8mo ago

@[Gadget] Kyle done - looks like this is the log trace for the request from flow: https://flow-extensions.gadget.app/edit/development/logs?logql=%7Benvironment_id%3D%22394033%22%7D%20%7C%20json%20%7C%20level%3D~%22info%7Cwarn%7Cerror%22%20%7C%20trace_id%3D%22110f2a6eb9bb6abc94f02a78074a0654%22&timeRange%5Binput%5D=Last%205%20mins Also I seem to have gotten farther this time - I don't recall seeing this load last time.

[Gadget] Kyle•8mo ago

ok cool! so then I think we are golden the steps then I think should be point your extension at https://flow-extensions--development.gadget.app/flow-extension and then I think in your App.jsx have something like:

const router = createBrowserRouter(
    createRoutesFromElements(
      <>
        {/* Main Layout Routes */}
        <Route path="/" element={<Layout />}>
          <Route index element={<Index />} />
          <Route path="/about" element={<AboutPage />} />
        </Route>

        {/* Flow Extension Layout Routes */}
        <Route path="/flow-extension" element={<FlowExtensionLayout />}>
          <Route index element={<FlowExtensionIndex />} />
          <Route path="page1" element={<FlowExtensionPage1 />} />
          <Route path="page2" element={<FlowExtensionPage2 />} />
          {/* Add more flow extension routes as needed */}
        </Route>

        {/* 404 Route */}
        <Route path="*" element={<Error404 />} />
      </>
    )
  );

const router = createBrowserRouter(
    createRoutesFromElements(
      <>
        {/* Main Layout Routes */}
        <Route path="/" element={<Layout />}>
          <Route index element={<Index />} />
          <Route path="/about" element={<AboutPage />} />
        </Route>

        {/* Flow Extension Layout Routes */}
        <Route path="/flow-extension" element={<FlowExtensionLayout />}>
          <Route index element={<FlowExtensionIndex />} />
          <Route path="page1" element={<FlowExtensionPage1 />} />
          <Route path="page2" element={<FlowExtensionPage2 />} />
          {/* Add more flow extension routes as needed */}
        </Route>

        {/* 404 Route */}
        <Route path="*" element={<Error404 />} />
      </>
    )
  );

the idea is that your admin app and your flow app will be the same app, but the flow extension can have an entirely different layout

kalenjordanOP•8mo ago

Okay I think I followed those instructions correctly: https://flow-extensions.gadget.app/edit/development/files/web/components/App.jsx I setup CustomFlowActionLayout following the pattern of Layout() and CustomFlowActionIndex following the pattern of Index Getting an error with @shopify/app-bridge/actions import here: https://flow-extensions.gadget.app/edit/development/files/web/routes/customFlowAction.jsx Tried replacing @shopify/app-bridge/actions with @gadgetinc/react-shopify-app-bridge - but didn't help. Do I just want to yarn add @shopify/app-bridge?

Chocci_Milk•8mo ago

I think that you need to use @shopify/app-bridge-react. @shopify/app-bridge is deprecated It should already be installed on your application

kalenjordanOP•8mo ago

I actually tried that too didn't work same error

Chocci_Milk•8mo ago

Could you please share the import with me?

kalenjordanOP•8mo ago

The import? I included links above - https://flow-extensions.gadget.app/edit/development/files/web/routes/customFlowAction.jsx - you mean this?

Chocci_Milk•8mo ago

Yeah. The import should be directly from @shopify/app-bridge-react. Heres the package: https://shopify.dev/docs/api/app-bridge-library/react-components

Shopify

App-bridge-library react-components

App Bridge is the JavaScript SDK for Embedded Apps, providing access to data and UI rendering within the Shopify Admin. App Bridge integrates directly into standard Web Platform APIs you're already familiar with, making it easy to build and maintain performant apps on the Shopify platform. For more informat...

Chocci_Milk•8mo ago

The no longer seem to have actions. I think that you just need to use Polaris

kalenjordanOP•8mo ago

I was looking at the javascript example instead of the react example from the flow docs - sorry about that. Here's the issue I'm hitting now: app-bridge.js:1 Unexpected attributes on <ui-title-bar>: primaryaction,secondaryactions Can I reference this forums post for more details or would you prefer that I repeat everything here and then relay things back and forth between you and the flow team? https://community.shopify.dev/t/questions-about-building-a-custom-configuration-ui-for-a-flow-action/6006/14?u=kalen

Shopify Developer Community Forums

Questions about building a custom configuration UI for a Flow Action

Getting this error in the console: Unexpected attributes on : primaryaction,secondaryactions (anonymous) @ app-bridge.js:1 Here’s what the html looks like - I’m guessing that’s some gadget boilerplate and it’s not serving it up the way you’re expecting. Can you confirm?

Chocci_Milk•8mo ago

TitleBar doesn't have those props. You need to pass the two buttons as children: https://shopify.dev/docs/api/app-bridge-library/react-components/titlebar-component

Shopify

TitleBar Component

The Title Bar API allows you to populate a standardized title bar with button actions and navigation breadcrumbs.

kalenjordanOP•8mo ago

Thanks that worked to show some buttons on the page and there's no error any more. I'm still not able to get anything to display in the main page area though. I think the issue here is that the flow docs just aren't very complete but it's hard to tell because there's magic going on under the hood. It's kind like with gadget how when you first install an app there's a working home page that kind of makes it obvious where things are and what you need to modify to get your custom UI/logic in place. Getting to that hello world working example is proving difficult here.

Chocci_Milk•8mo ago

Do you see any errors in the network tab? Could you please also share the URL that you're trying to hit?

kalenjordanOP•8mo ago

No errors - I think at this point I'm just waiting for a better sample jsx from the flow docs - I believe theyr'e going to get back to me on that - thanks for the help

kalenjordanOP•7mo ago

Made some progress with the flow team and I think I'm back at a gadget question now. Getting this error:

Error: useLocation() may be used only in the context of a <Router> component.

Error: useLocation() may be used only in the context of a <Router> component.

@[Gadget] Kyle had given me a rough example of how to get a web route setup which I tried to follow but it's probably not quite right. Looks like dependencies may be comingled in a bad way in App.jsx https://flow-extensions.gadget.app/edit/development/files/web/components/App.jsx?startLineNumber=50&startColumn=0&endLineNumber=51&endColumn=0

[Gadget] Kyle•7mo ago

hmm looking at the app it seems right to me are you still seeing this with the current state of your app that's a react-router error; but what I can tell you should be inside of a Router context

kalenjordanOP•7mo ago

lemme test again yeah still seeing it @[Gadget] Kyle any word? might be worth spinning up a flow extension on your end to test out? I get the sense this is a shopify app surface that gadget hasn't spent much time looking at to date?

[Gadget] Kyle•7mo ago

yah we haven't really from my reading of the error this looks like an issue configuring react router, but let me take another look

kalenjordanOP•7mo ago

thanks

Gaming

Programming

Building a custom configuration page for a Flow Action

Did you find this page helpful?