[IGN-6659]React config page example

Still would appreciate any pointers in how we might be able to leverage React

IA’s been dinged in various places about lack of docs for the gateway web interface’s React options. They’ve promised to fix that. It will be especially urgent for v8.3, now that we know Wicket will be gone.

The entrypoint is going to be com.inductiveautomation.ignition.gateway.web.pages.config.AbstractReactConfigPage.

I literally can’t help you with the process of building a JS bundle in the right place, but the theory is that you just have to put your assets (through whatever build process you like) into the module as resources so they can be served out.

Then the actual page will call in to your mounted RouteGroup with bog-standard JSON-over-the-wire. Your backend accepts the JSON and creates/edits records as appropriate. There’s no (current) super easy automatic equivalent to RecordEditForm; that’s one of many things that’ll likely come with 8.3.

3 Likes

Hmmm. Meaning, if we implement that, it is likely to work through the v8.1 → v8.3 transition?

No, still won’t immediately work. AbstractReactConfigPage is still a Wicket hook. There’ll likely be some other scaffolding required on the Java side; likely similar, but still not binary compatible.

Sounds still worth me doing in 8.1, then.

2 Likes

Hi,

I was just viewing this thread.

Where does that class exist? I can’t seem to find it in my module development workspace, closest thing I have in that package is ReactEditForm…

Edit: Which derives from nothing…

Ah, looks like that class is part of the ‘platform’, but not published as part of the SDK. That’s probably a good first step to a React config page example. I’ll get a ticket filed internally to push a React config page example and make required classes public in the SDK.

There’s a bunch of stuff in the API under com.inductiveautomation.ignition.gateway.web.components.react. Will poke around some other time.

I moved this out to a new topic to separate it from the existing (solved) thread and so I could link in the appropriate internal issue.

2 Likes