Questions about building a custom configuration UI for a Flow Action

Trying to build a custom configuration UI, following these docs:

I assume that config_page_url is expecting a URL that is outside of the normal app url structure - i.e. https://admin.shopify.com/store/kalen-test-store/apps/flow-extensions/action-config ?

I’m trying to get this working on gadget, so I’m trying to do that with this url:
https://flow-extensions--development.gadget.app/action

But at the moment it’s returning json and I’m trying to get it to serve a react app.

I think you are asking about the config page and not the preview.

Have you seen this help page? Build the configuration UI

Yeah that’s the one I’m looking at - I pasted the wrong docs link into my initial post.

The reason I pasted the other docs link is that’s the only place I saw the actual name for the config page url in the toml file (config_page_url).

Also Gadget support is asking: Could you simply return React as a string?

I suspect the answer to that is no. You’re expecting the action endpoint to actually return a fully rendered React app?

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

1 Like

Okay makes sense. Looking into it. Hopefully gadget will have a way to handle this. They have some magic with their web routes that only renders them inside of the app context in the shopify admin.

@airhorns hey do you know the best way to get a gadget route to serve a react frontend with app bridge in there in order to implement this custom configuration UI for a flow action?

My support thread is here btw - Discord

I thought this might be relevant to others trying to implement this in the future since it seems a little out of the box.

1 Like

@paul_n Can it be a local url btw? Does it just locally iframe it in? Or does it hit it server side?

Local - not without a tunnel

Got it. And how does authentication work? Will the configuration UI “iframe” be authenticated with a session token or something?

That is handled via App Bridge

We’re getting a little farther. I think now I just need them to make a relatively simple tweak to allow me to load an arbitrary jsx route within their routing logic.

2 Likes

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?

If you take a look at the TitleBar component in the @shopify/app-bridge-react package, you’ll notice that TitleBar doesn’t have props besides “title” and “children”. You need to pass those buttons as child components: TitleBar Component

I would like to point out that our frontends aren’t a black box. The way we built the feature yes, but not the files that are hosted. You have full control over the code and it should will work like any other application built in React/Remix/etc (whatever Vite supports)

@DevAOC thanks. I don’t think titleBar is the issue.

@paul_n do you know why this error is throwing? I just copied and pasted in the example from the docs.

Trying to just get a basic hello world situation working here.

From the issue you shared above (unexpected attribute) and the titleBar docs, the issue is definitely that you’re not using the component correctly. I’ve looked at your code in the app and see that you’re passing the props primaryAction and secondaryAction. These are not accepted props on the TitleBar component from @shopify/app-bridge-react

Hey Kalen,

Can you share the TitleBar code you have? Or some of it.

Not sure about the error message, but it definitely does not accept other parameters than title and children.

@DevAOC the reason I’m trying to get you to work a little more closely with the flow team here is that all I’m doing is following their docs. If something is broken it’s either in their docs or on the gadget side. I think it would be useful to for gadget to have a simpler path to getting one of these custom flow config UIs up and running, just like you have for other pieces of shopify functionality.

@curzey thanks for looking into this. I went ahead and made my repo public which I was planning to do once it was all working:

I just copied and pasted in that code from the flow docs - should be pulling TitleBar from the app bridge package.

Though I just realized that I might be using the 3.x version instead of the 4.x version - perhaps that’s the issue.

The snippet from the 4.x version doesn’t seem complete though - it’s got … in the return value:

1 Like

There’s nothing broken on the Gadget side. The error is outdated Shopify docs. I think you should focus less on the example in their docs and more on the package docs that you’re using