Creating custom link and React page for DeviceExtensionPoint

Ignition 8.3 Early Access
1

Hello, I’ve been trying to figure out how to create a custom page of settings for my DeviceExtensionPoint, and so far I’ve only been able to figure out how to create a link in the menu. Is there a more comprehensive example of how I might be able to achieve this? For example, I want something like the programmable simulator Edit Program page.

From what I’ve gathered so far, I can override DeviceExtensionPoint.getMenuActions with something like

public List<MenuAction> getMenuActions() {
    return List.of(new MenuAction("title", "descr", new ReactComponentInfo("DeviceConfiguration", new SystemJsModule(Util.MODULE_ID, "/res/web-ui-test/helloIgnition.js"))));
}

I also created an instance of that SystemJsModule in the module hook and registered it with the systemjsmoduleregistry and overrode getMountedResourceFolder, mountRouteHandlers, getMountPathAlias and onMountedResourceRequest like in the sdk example, but I’m seeing

ERROR: Failed to load

Module: MODULE_ID

Component: DeviceConfiguration

after clicking my new link. I’m reusing much of the resources from the sdk example, so I do have something at that path. The gateway log isn’t reporting any useful errors however.

2

Bump

3

Disclaimer: not a web guy.

What path is it attempting to load the module component from? You should be able to see the path using the browser's developer tools (F12 hotkey in Chrome). Does that path correlate with your getMountedResourceFolder, component name, etc.?

4

Hi Cody,

Appreciate it, I’m not much of a web guy either. What am I looking for? In Chrome, under the Sources → Page tab, I see the folder structures but I can’t seem to find one with my module name, nor can I find the sample web-ui-test one from the sample SDK that I have also installed. What I do see is on line 13 of the home page is a line of imports, including my own (res/moduleName/helloIgnition.js) and the one from the SDK (res/web-ui-test/helloIgnition.js).

5

Don't look at the sources tab, look at the network tab on a fresh page load.

6

Sorry if it wasn’t clear from earlier, but I’m trying to figure out how everything is hooked up using the example files from the SDK example, which also includes the JS files. I don’t know if that would affect loading that page, but I figured some additional context would help.

7

I don’t see it, whether I just land on the Device Connections page or when I click on my custom link. I did completely miss this error though:

image
image1135×1182 114 KB

8

I think I resolved it. For anyone following along or interested, I had a couple of mistakes that compounded each other. My original code example of

public List<MenuAction> getMenuActions() {
    return List.of(new MenuAction("title", "descr", new ReactComponentInfo("DeviceConfiguration", new SystemJsModule(Util.MODULE_ID, "/res/web-ui-test/helloIgnition.js"))));
}

was incorrect. Because I was reusing the Ignition SDK example, the code should have looked like this:

public List<MenuAction> getMenuActions() {
    return List.of(new MenuAction("title", "descr", new ReactComponentInfo("HelloIgnition", new SystemJsModule(Util.MODULE_ID, "/res/web-ui-test/helloIgnition.js"))));
}

The component ID matters here. I’m not sure if that is based on a field name in the web-ui folder or the name of the folder holding the .ts files, but I’ll figure that out later.

The other thing I got wrong was I had adjusted the web-ui/webpack.config.js file. That shouldn’t be necessary. When you open up the web-ui portion of a module, the internal folder structure is something like

/mounted/path/to/helloIgnition.js

To get to that organization, SystemJsModule is created like:

SystemJsModule jsModule = new SystemJsModule(MODULE_ID, "/res/test/path/to/helloIgnition.js");

and the following methods need to be implemented:

@Override
public Optional<String> getMountedResourceFolder() {
    return Optional.of("mounted");
}


@Override
public Optional<String> getMountPathAlias() {
    return Optional.of("test");
}

Where “test” would be a simple name for your module. The folder structure in the web-ui jar follows what is referenced in the jsModule creation, except for /res/test.

4 Likes